我使用Visual Studio 2015与更新1,我有nHTMLTypeScript项目.
如果我将“模块系统”设置为“系统”,我会收到构建错误(如：找不到模块’angular / core’),但会在保存(而不是构建)上编译ts文件.如果我已经有应用程序运行我可以刷新页面,它的工作原理.
如果我将’模块系统’设置为“CommonJS”,它将正确构建,但是我得到运行时错误,如“’require’未定义”和“Unable to get property’split’of undefined or null reference”.
我想我应该使用系统,因为在教程中使用tsconfig.json和lite-server(使用npm启动)时,这是有用的.
你会注意到,我把我的应用程序文件夹和ts文件放在我的wwwroot – 这只是我的喜好,它是在angular2快速启动.我将我的节点模块中的捆绑文件复制到我的wwwroot中的我的脚本文件夹中.
我基于angular2 beta quickstart创建了一个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并开始使用它.除此之外,我进了我的工具>选项并设置像这样的typescript选项：
<!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(); (这需要安装一个附加包),我已经准备好再试一次：
成功！
