typescript – 使用angular2与visual studio

有没有人得到Angular2(beta)在Visual Studio工作？

我使用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启动)时,这是有用的.

我有角度2与Visual Studio 2015工作.我不得不安装 .NET 5 RC1来支持tsconfig.json.他们有一个全新的项目结构,我非常喜欢.这是我的设置：

你会注意到,我把我的应用程序文件夹和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选项：

接下来我添加了我的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(); (这需要安装一个附加包),我已经准备好再试一次：

成功！

typescript – 使用angular2与visual studio

猜你在找的Angularjs相关文章