使用 Visual Studio 2015 无法在 Angular 2 上编译打字稿文件 [英] Typescript files not compiling on Angular 2 with Visual Studio 2015

问题描述

我按照

• 添加 package.json 文件 &添加所有必需的依赖项.

<块引用>

package.json

<代码>{版本":0.0.1"，"name": "vs2015-angular2-template",依赖关系":{"angular2": "2.0.0-beta.15","systemjs": "^0.19.27","es6-promise": "^3.1.2","es6-shim": "^0.35.0",反射元数据":^0.1.3"，"rxjs": "5.0.0-beta.2","zone.js": "^0.6.12","引导程序": "^3.3.6",jquery":^2.2.3"},开发依赖":{"gulp": "^3.9.1","gulp-clean": "^0.3.2"}}

• 创建scripts"文件夹，在这里您将拥有所有*.ts文件和tsconfig.json(所有*.js转换后的文件将移动到../wwwroot/appScripts/")

<块引用>

tsconfig.json

<代码>{编译器选项":{emitDecoratorMetadata":真，"experimentalDecorators": 真,"module": "commonjs",noEmitOnError":真，noImplicitAny":假，"outDir": "../wwwroot/appScripts/",删除评论":假，源地图":真，目标":es5"，内联资源":真},排除": [节点模块"，打字/主要"，打字/main.d.ts"]}

• 添加 Gulp 文件，它将负责将所有必需的文件从 node_modules 移动到 wwwroot 下的 lib 文件夹
• 创建 index.html 文件 &从位于 wwwroot 下的 lib 文件夹中添加所有必需的文件引用.

如果你想手动安装所有的包

npm 安装

注意:请安装 Visual Studio 2015 中与 VS2015 更新 3 和DotNetCore.1.0.0.RC2-VS2015Tools.Preview1"相关的所有更新.那么只有您才能运行此解决方案.

<小时>

您可以从这里下载用于 Visual Studio 2015 更新 3 的 Angular2 模板"...

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 无法在 Angular 2 上编译打字稿文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！