在 Visual Studio 中使用 angular2 [英] Use angular2 with visual studio

问题描述

有没有人让 Angular2(测试版)在 Visual Studio 中工作?

我使用的是更新 1 的 Visual Studio 2015，并且我有 n 个 HTMLTypeScript 项目.

如果我将模块系统"设置为系统"，我会收到构建错误(例如:找不到模块角度/核心")，但它会在保存时(而不是在构建时)编译 ts 文件.如果我已经运行了应用程序，我可以刷新页面并且它可以工作.

如果我将模块系统"设置为CommonJS"，它将正确构建，但会出现运行时错误，例如‘require’未定义"和无法获取未定义或空引用的属性‘split’".

我认为我应该使用 system 因为这在使用 tsconfig.json 和教程中使用的 lite-server(带有 npm start)时有效.

解决方案

我在 Visual Studio 2015 中使用 angular2.我必须安装

您会注意到我将我的 app 文件夹和 ts 文件放在我的 wwwroot 中 - 这只是我的偏好，它遵循 angular2 快速入门.我将节点模块中的捆绑文件复制到 wwwroot 内的脚本文件夹中.

我基于 angular2 beta 快速入门创建了一个 package.json:

<代码>{"name": "angular2-quickstart",版本":1.0.0"，"许可证": "ISC",依赖关系":{"angular2": "2.0.0-beta.0","systemjs": "0.19.6","es6-promise": "^3.0.2","es6-shim": "^0.33.3",反射元数据":0.1.2"，"rxjs": "5.0.0-beta.0",zone.js":0.5.10"}}

然后我右键单击 package.json 并选择Restore Packages"并运行 NPM 安装以创建包含您看到的所有包的 node_modules 文件夹.然后我像这样设置我的 tsconfig.json 并将其放在根目录中:

<代码>{编译器选项":{目标":es5"，模块":系统"，"moduleResolution": "节点",源地图":真，emitDecoratorMetadata":真，"experimentalDecorators": 真,删除评论":假，"noImplicitAny": 假},排除": [节点模块"]}

这是让它发挥作用的关键.我实际上不得不重新加载解决方案以查看 tsconfig.json 并开始使用它.除此之外，我进入我的工具>选项并设置打字稿选项，如下所示:

接下来我添加了我的 index.html 文件:

<头><meta charset="utf-8"/><title>示例 Angular 2 应用</title><身体><my-app>正在加载...</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><脚本>系统配置({包:{应用程序: {格式:'注册'，默认扩展名:'js'}}});System.import('app/boot').then(null, console.error.bind(console));

脚本包含的顺序很重要！这是我的 MyApp.ts 文件:

import { Component } from "angular2/core";@零件({选择器:我的应用程序"，模板:`<div>来自 Angular 2 的你好</div>`})导出类 MyApp {公共构造函数(){}}

和我的 boot.ts 文件:

import { bootstrap } from "angular2/platform/browser";从./MyApp"导入 { MyApp };引导程序(我的应用程序)；

此时我觉得我已经准备好运行它，所以我启动它并导航到我的/index.html - 但我看到的只是Hello World！".它似乎忽略了我提供 index.html 的路径，并静态地写出文本.查看Startup.cs，我发现了问题.:

命名空间 Angular2Demo{公开课启动{//这个方法被运行时调用.使用此方法向容器添加服务.//有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=398940public void ConfigureServices(IServiceCollection 服务){}//这个方法被运行时调用.使用此方法配置 HTTP 请求管道.公共无效配置(IApplicationBuilder 应用程序){app.UseIISPlatformHandler();//添加这个！app.UseStaticFiles();//删除这个！//app.Run(async (context) =>//{//await context.Response.WriteAsync("Hello World!");//});}//应用程序的入口点.public static void Main(string[] args) =>WebApplication.Run(args);}}

通过注释掉 app.Run 并添加 app.UseStaticFiles();(这需要安装额外的包)，我准备再试一次:

成功！

Has anyone gotten Angular2 (beta) to work in Visual Studio?

I am using Visual Studio 2015 with update 1 and I have n HTMLTypeScript project.

If I set the 'module system' to "System" I get build errors (such as: Cannot find module 'angular/core') but it will compile the ts files on save (not on build). If I already have the application running I can refresh the page and it works.

If I set the 'module system' to "CommonJS" it will build properly but I get runtime errors such as "'require' is undefined" and "Unable to get property 'split' of undefined or null reference".

I think I should use system because that is what works when using tsconfig.json and the lite-server (with npm start) that is used in the tutorials.

解决方案

I have angular2 working with Visual Studio 2015. I had to install .NET 5 RC1 to support tsconfig.json. They have a completely new project structure which I like very much. Here is my setup:

You'll notice that I put my app folder and ts files inside my wwwroot - that's just my preference, and it's following the angular2 quickstart. I copied the bundled files from my node modules into my scripts folder inside my wwwroot.

I created a package.json based on the angular2 beta quickstart:

{
  "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"
  }
}

Then I right-clicked on the package.json and selected "Restore Packages" and it ran the NPM install to create the node_modules folder with all the packages you see. Then I setup my tsconfig.json like so and put it in the root:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

This is key to making it work. I actually had to reload the solution for it to see the tsconfig.json and start using it. In addition to this, I went into my Tools > Options and set the typescript options like so:

Next I added my index.html file:

<!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>

The order of your script includes is important! Here's my MyApp.ts file:

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `
        <div>Hello from Angular 2</div>
    `
})
export class MyApp {
    public constructor() {
    }
}

and my boot.ts file:

import { bootstrap } from "angular2/platform/browser";
import { MyApp } from "./MyApp";

bootstrap(MyApp);

At this point I felt I was ready to run it, so I launched it and navigated to my /index.html - but all I saw was "Hello World!". It seemed to be ignoring my path to serve index.html and was statically writing out text. Looking at the Startup.cs, I found the problem.:

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);
    }
}

By commenting out the app.Run and adding the app.UseStaticFiles(); (which required installing an additional package), I was ready to try again:

Success!

这篇关于在 Visual Studio 中使用 angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！