Question

有没有人让Angular2（beta）在Visual Studio中工作？

我正在使用Visual Studio 2015和更新1，我有一个HTMLTypeScript项目。

如果我设置了＆＃39;模块系统＆＃39;到＆＃34;系统＆＃34;我遇到了构建错误（例如：找不到模块＆＃39; angular / core＆＃39;）但它会在保存时编译ts文件（而不是构建版本）。如果我已经运行了应用程序，我可以刷新页面并且它可以工作。

如果我设置了＆＃39;模块系统＆＃39;到＆＃34; CommonJS＆＃34;它会正确构建但我会遇到运行时错误，例如＆＃34;＆＃39;要求＆＃39;未定义＆＃34;和＆＃34;无法获得财产＆＃39;拆分＆＃39;未定义或空引用＆＃34;。

我认为我应该使用系统，因为这在使用教程中使用的tsconfig.json和lite-server（使用npm start）时有效。

Answer 1

我有角度2使用Visual Studio 2015.我必须安装.NET 5 RC1来支持tsconfig.json。他们有一个全新的项目结构，我非常喜欢。这是我的设置：

您会注意到我将我的app文件夹和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并选择“Restore Packages”并运行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并开始使用它。除此之外，我进入了我的工具＆gt;选项并设置typescript选项，如下所示：

接下来我添加了我的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();（需要安装其他软件包），我已准备好再试一次：

成功！

将angular2与visual studio

1 个答案: