我有 angular2 使用 Visual Studio 2015。我必须安装 .NET 5 RC1 来支持 tsconfig.json。他们有一个全新的项目结构，我非常喜欢。这是我的设置：
您会注意到我将我的 app 文件夹和 ts 文件放在我的 wwwroot 中 - 这只是我的偏好，它遵循 angular2 快速入门。我将捆绑的文件从我的节点模块复制到我 wwwroot 内的脚本文件夹中。
我基于 angular2 beta 快速入门创建了一个 package.json：
{
"name": "angular2-quickstart",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
}
}
然后我右键单击 package.json 并选择“恢复包”并运行 NPM 安装以创建包含您看到的所有包的 node_modules 文件夹。然后我像这样设置我的 tsconfig.json 并将其放在根目录中：
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
这是让它发挥作用的关键。实际上，我必须重新加载解决方案才能看到 tsconfig.json 并开始使用它。除此之外，我进入我的工具 > 选项并设置打字稿选项，如下所示：
接下来我添加了我的 index.html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample Angular 2 App</title>
</head>
<body>
<my-app>Loading...</my-app>
<script src="scripts/angular2-polyfills.js"></script>
<script src="scripts/system.src.js"></script>
<script src="scripts/Rx.js"></script>
<script src="scripts/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot').then(null, console.error.bind(console));
</script>
</body>
</html>
脚本包含的顺序很重要！这是我的 MyApp.ts 文件：
import { Component } from "angular2/core";
@Component({
selector: "my-app",
template: `
<div>Hello from Angular 2</div>
`
})
export class MyApp {
public constructor() {
}
}
还有我的 boot.ts 文件：
import { bootstrap } from "angular2/platform/browser";
import { MyApp } from "./MyApp";
bootstrap(MyApp);
此时我觉得我已经准备好运行它了，所以我启动它并导航到我的 /index.html - 但我看到的只是“Hello World！”。它似乎忽略了我为 index.html 提供服务的路径，而是静态地写出文本。查看Startup.cs，我发现了问题。：
namespace Angular2Demo
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app)
{
app.UseIISPlatformHandler();
// Add this!
app.UseStaticFiles();
// Remove this!
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
}
// Entry point for the application.
public static void Main(string[] args) => WebApplication.Run<Startup>(args);
}
}
通过注释掉app.Run 并添加app.UseStaticFiles();（这需要安装一个额外的包），我准备再试一次：
成功了！