打字稿文件不与Visual Studio 2015年编制的2角 [英] Typescript files not compiling on Angular 2 with Visual Studio 2015

问题描述

我跟着扎克的回答，并创造新的VS 2015年5 .NET项目，并与打字稿运行角2。它看起来像它的工作。但是有一个小问题：

MyApp.ts：

 进口{}组件从angular2 /芯;@零件（{
    选择：我的应用，
    模板：`
        ＆LT; D​​IV＆GT;您好：角2'; / DIV＆GT;
    `
}）
出口类的MyApp {
    公共构造（）{
    }
}
 

当我更改模板，输入一些不同的文字，可以说＆LT; D​​IV＆gt;此处的一些文字＆lt; / DIV＆GT; ，然后我重新编译该项目并运行浏览器中看到的改变 - 它仍然显示旧的模板文本 - 你好，从角2 的。所以我在检查 MyApp.js ，并没有什么改变也（从 MyApp.ts 编译）。

（我试过建设项目多次，也靠近VS并重新打开它 - MyApp.ts 编译只有一次 - 第一次时，它的创建）

附加文件：的（，可以帮助解决的）

tsconfig.json：

  {
  compilerOptions：{
    目标：ES5
    模块：系统
    moduleResolution：节点，
    sourceMap：真实，
    emitDecoratorMetadata：真实，
    experimentalDecorators：真实，
    removeComments：假的，
    noImplicitAny：假的
  }，
  排除：[
    node_modules
  ]
}
 

它从何而来（问题）？角？打字稿？ 2015年VS？
从我看来 - 必须是打字稿及编译的东西吗？有什么建议么？

P.S：的此实现不上的IE浏览器！

进展：的如果我干净 - 重建 - 打造我的项目 - 它编译.TS文件，但其同样的事情在第一时间汇编 - 实际上不是一个解决方案...

解决方案

2角模板为Visual Studio 2015年更新3

步骤： -

• 创建一个空的.NET核心或ASP.Net项目。


• 项目结构看起来像这样...

• 添加的package.json文件＆放大器;添加所有所需的依赖关系。

  

的package.json

  {
  版本：0.0.1
  名：vs2015-angular2模板
  依赖：{
    angular2：2.0.0-beta.15
    systemjs：^ 0.19.27，
    ES6-承诺：^ 3.1.2
    ES6-垫片：^ 0.35.0
    反映了元数据：^ 0.1.3
    rxjs：5.0.0-beta.2
    zone.js：^ 0.6.12，
    引导：^ 3.3.6
    jQuery的：^ 2.2.3
  }，
  devDependencies：{
    吞掉：^ 3.9.1
    吞掉干净：^ 0.3.2
  }
}
 

• 创建脚本文件夹，在这里你将拥有所有的* .TS文件和tsconfig.json（所有的* .js文件转换将移到../ wwwroot文件/ appScripts /）

  

tsconfig.json

  {
  compilerOptions：{
    emitDecoratorMetadata：真实，
    experimentalDecorators：真实，
    模块：CommonJS的
    noEmitOnError：真实，
    noImplicitAny：假的，
    OUTDIR：../wwwroot/appScripts/，
    removeComments：假的，
    sourceMap：真实，
    目标：ES5
    inlineSources：真
  }，
  排除：[
    node_modules
    分型/主
    分型/ main.d.ts
  ]
}
 

• 添加这会照顾来自node_modules移动所有必需的文件到lib文件夹的wwwroot下的文件咕嘟咕嘟


• 创建index.html文件和放大器;从lib文件夹是wwwroot之下添加所有所需文件的参考。

如果您想要手动安装所有软件包

NPM安装

请注意：请安装所有更新从Visual Studio 2015相关的VS2015更新3和DotNetCore.1.0.0.RC2-VS2015Tools preview1。那么只有你将能够运行这一解决方案。

---

您可以下载Angular2模板为Visual Studio 2015年更新3从这里开始...

https://github.com/narottamgoyal/Vs2015Angular2Template.git

I followed Zach's Answer and create new VS 2015 .NET 5 project and run Angular 2 with Typescript. It looks like its working. But there is a little problem:

MyApp.ts :

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `
        <div>Hello from Angular 2</div>
    `
})
export class MyApp {
    public constructor() {
    }
}

When i change the template, type some different text, lets say <div>Some text here</div> , and then i recompile the project and run in browser to see the change - it still shows the older template text - Hello from Angular 2. So i checked in the MyApp.js (compiled from the MyApp.ts), and there is no change also.

(I tried building the project multiple times, also close VS and reopen it - MyApp.ts is compiled only once - the first time when its created.)

Additional files: (that may help solving)

tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Where it comes from (the problem)? Angular? Typescript? VS 2015? From my opinion - must be something with Typescript and its compilation? Any suggestions?

P.S: this implementation do not work on IE!

Progress: if i clean - rebuild - build my project - it compiles the .ts files, but its the same thing as the first time compilation - not actually a solution...

解决方案

Angular 2 Template for Visual Studio 2015 with update 3

Steps:-

• Create a empty ".net core or ASP.Net" project.
• Project Structure will look like this...

• Add package.json file & add all the required dependencies.

package.json

{
  "version": "0.0.1",
  "name": "vs2015-angular2-template",
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "systemjs": "^0.19.27",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "^0.6.12",
    "bootstrap": "^3.3.6",
    "jquery": "^2.2.3"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2"
  }
}

• Create "scripts" folder, here you will have all your *.ts files and tsconfig.json (all the *.js converted files will moved to "../wwwroot/appScripts/")

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/appScripts/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",    
    "inlineSources": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

• Add Gulp file which will take care of moving all the required files from node_modules to lib folder under wwwroot
• Create index.html file & add all the required file reference from lib folder which is under wwwroot.

If you want to manually install all the packages

npm install

Note: Please install all the Updates from visual studio 2015 related to VS2015 update 3 and "DotNetCore.1.0.0.RC2-VS2015Tools.Preview1". Then only you will be able to run this Solution.

---

You can download "Angular2 Template for Visual Studio 2015 with update 3" from here...

https://github.com/narottamgoyal/Vs2015Angular2Template.git

这篇关于打字稿文件不与Visual Studio 2015年编制的2角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！