Question

我们正在尝试使用Visual Studio 2015启动一个新的Angular2项目。我们已经创建了一个新的TypeScript项目，并且根据一个示例，我们发现我们已将以下内容放在index.html文件中：

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

（sidenode - 为什么我们需要多个包含？每个意味着什么以及为什么不将它们全部放在一个基本文件中？）

我们的角度应用程序如下所示：

import {Component} from 'angular2/core';

@Component({
    // Declare the tag name in index.html to where the component attaches
    selector: 'hello-world',
    // Location of the template for this component
    templateUrl: 'app/hello_world.html'
})

export class HelloWorld {
    // Declaring the variable for binding with initial value
    yourName: string = '';
}

我们想要从absolutetyped为angular2添加一个类型文件，但它似乎是空的（https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/angular2/angular2.d.ts）。我们还从nuget（https://www.nuget.org/packages/angular2.TypeScript.DefinitelyTyped/）安装了它并得到了相同的空文件 - 也许它没有跟上角度开发的步伐？

Error   TS1148  Cannot compile modules unless the '--module' flag is provided.  Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   3   Active
Error   TS2307  Cannot find module 'angular2/core'. Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   3   Active
Error       Build: Argument of type '{ selector: string; templateUrl: string; }' is not assignable to parameter of type '{ selector: string; properties?: Object; hostListeners?: Object; injectables?: List<any>; lifecyc...'. Angular2TS_Test c:\users\ophir_o\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   9   
Error       Build: Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.   Angular2TS_Test c:\users\ophir_o\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   12  
Error   TS1219  Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.  Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   12  Active

如何更正使用TypeScript和VisualStudio启动angular2项目的当前方法？我们无法找到任何最新的指南...

Answer 1

system.js ：带有TypeScript的AngularJS依赖于模块加载器。 SystemJS是一个通用的动态模块加载器。
angular2-polyfills.js ：需要区域和支持变更检测。
RxJS ：用于支持可观察序列和事件流的库。除非你打算使用Observable，否则你不需要这个。
Angular2.dev.js ：是的，你需要这个。这是Angular2库。
es6-shim ：这是确保es6兼容尚未支持完整es6标准的浏览器所必需的。如果您的目标是es6语言规范（即使用es6提供的语言功能），则应包括此项。否则，如果您只是使用es5，则不需要此垫片。
typescript.ts ：用于将打字稿转换为javascript客户端。如果您在typescript中编写Angular2组件，并且希望在客户端上进行转换，请包括此项。另一种方法是在服务器上转换typescript，在这种情况下，这不包括在内。

您的组件实现看起来很好。

要与VS2015集成，请按照接受的答案中的以下说明进行操作：

cannot find module 'angular2/core'

您的脚本应如下所示：

<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {'app': {defaultExtension: 'ts'}}
  });
</script>
<!-- 3. Bootstrap -->
<script>
    System.import('app/boot')
               .then(null, console.error.bind(console));

</script>

<强> HTML

<!-- 4. Display the application -->
<body>
    <hello-world>Loading...</hello-world>
</body>

创建app文件夹。在app文件夹中，添加boot.ts和helloworld.component.ts。

应用/ boot.ts

import { bootstrap } from 'angular2/platform/browser'; import { HelloWorld } from './helloworld.component'; bootstrap(HelloWorld);

应用/ helloworld.component.ts

import {Component} from 'angular2/core'; @Component({ // Declare the tag name in index.html to where the component attaches selector: 'hello-world', // Location of the template for this component templateUrl: './hello_world.html' }) export class HelloWorld { // Declaring the variable for binding with initial value yourName: string = ''; }

Answer 2

您需要添加一个tsconfig.json文件，告诉TypeScript编译器如何编译Angular2的代码。请参阅：https://github.com/mgechev/angular2-seed/blob/master/tsconfig.json

Answer 3

这是一个种子项目的链接，其中包含Angular 2的最低要求和代码。 Angular 2 seed project for Visual Studio 2015

但有两件事很重要：

1 - 配置IIS以服务项目

2 - 在安装节点后下载最新的nodejs（使用最新的npm） - 设置VS2015“外部Web工具”（您可以在快速启动中找到它）以使用nodejs位置（对我来说默认为“c ：\ Program Files \ nodejs“）并使用向上箭头将其设置为第一优先级。

开始使用VisualStudio，TypeScript和Angular2

3 个答案: