Angular 2 Beta:Visual Studio ASP .NET MVC

Question

我为Angular 2 alpha 45构建了一个应用程序,它工作得非常好,但是为了让它工作,我不得不"乱七八糟".我理解Angular 2,但我不明白如何让它开始实际使用Angular 2.

我正在尝试清晰构建'Angular 2:5 min Quickstart'.有很多问题,我将尽可能具体.我想了解为什么这些问题正在发生,并希望如何解决它们.Visual Studio 2015 Update 1,Typescript 1.7.

打字稿配置:快速入门包括tsconfig.json文件.

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

我不确定这是否有效,因为我必须编辑ProjectName.csproj文件并添加行: <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 以摆脱实验装饰器错误. https://github.com/Microsoft/TypeScript/issues/3124似乎建议tsconfig文件需要在/ Scripts中工作,但这对我也不起作用.

我想知道如何使这个tsconfig文件工作,或编辑.csproj文件以获得相同的编译器选项.如果查看Project Properties> Typescript Build.这些重要吗？模块系统应该是:系统？

我的文件结构与Quickstart相同.

app/
    app.component.ts
    boot.ts
node_modules/
    blah
index.html
tsconfig.json
package.json

我使用powershell运行npm install来获取node_modules目录中的所有内容.

import {Component} from 'angular2/core';显示错误.../node_modules/angular2/core';不会显示错误,但是当您构建项目时,会在文件中出现大量构建错误node_moduels/angular2/src/*.现在,我可能会进入并手动修复这些问题,但我觉得如果出现这些错误,配置是错误的.tsconfig似乎想要排除node_modules.为什么我无法使用'angular2/core'而必须使用它的相对路径？如果我在Visual Studio项目中包含node_modules,则会出现大量的构建错误node_modules.另外:我正在做这个干净的构建,因为我无法弄清楚如何将项目从alpha 45更新到beta 0.修复我的项目中的Angular 2更改中的错误将很容易,但让应用程序加载所有模块这一刻是不可能的.

接下来的部分假设我已经超越了构建错误:在index.html那里:

System.config({
    packages: {
    app: {
        format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/boot')
    .then(null, console.error.bind(console));

我System.import('app/boot')没有指定文件扩展名,从来没有工作过.这是一个视觉工作室问题还是.NET MVC问题？如果我指定文件扩展名index.html,那么我得到404s与System.js试图找到没有文件扩展名的组件文件(即使配置有defaultExtension: 'js'.这是因为我需要在我的项目中包含js文件吗？那么如果我过去那个问题,我必须处理

system.src.js:1049 GET http://localhost:63819/angular2/http 404 (Not Found)

我没有一个构建错误,但现在System.js没有加载任何东西.

我觉得这些都是由不同系统以不同方式解释打字稿而创建的所有问题.我觉得我还不清楚,但我不知道如何清楚这个问题.我非常感谢你能给我的任何帮助和指导.我觉得我好几天都在寻找答案.

Answer 1

我一开始也遇到了一些问题,但它们很容易修复.

TsConfig相当于

一,项目设置:

<TypeScriptToolsVersion>1.7.6</TypeScriptToolsVersion>
<TypeScriptModuleKind>system</TypeScriptModuleKind>
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --experimentalDecorators </TypeScriptAdditionalFlags>
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata </TypeScriptAdditionalFlags>

系统模块是正确的,但检查它是否正确包含在您的html文件中.您也可以在项目选项窗口中选择它.

根据您的VS版本,您需要在其他标志(旧版本)或专用标签中指定标志.您仍然需要在项目选项中检查源图和es目标版本(显然,es5是EcmaScript版本中的EcmaScript 5).

不要忘记安装最新的TypeScript版本,否则RxJs将无法正常工作.

Angular2文件

虽然通过npm下载angular2是有道理的,但我不会在你的typescript文件夹中直接包含node_modules.包括整个文件夹意味着将所有其他节点模块放在一起,例如gulp.相反,您只需将您的typescript目录中的整个angular2文件夹复制到Content文件夹中(如果需要,您可以使用gulp或简单的bat文件自动执行此操作).

关于typescript错误,问题是Visual Studio将尝试分析angular2文件夹中的所有文件,并且其中一些文件是重复的.您需要删除源并仅保留已编译的js文件和类型定义.这意味着:

• remove/es6(它们是用于在es6而不是typescript中开发的文件)
• remove/ts(源文件)
• 删除捆绑/打字(es6-shim和jasmine的附加定义文件)

您需要与angular2在同一文件夹级别的rxjs文件夹,否则包含将不起作用,即:

Content  
    typings  
        angular2  
        rxjs  
        mymodule
           whatever.ts
        boot.ts

在您的html文件中,您可以链接angular2和rxjs的bundle文件夹中的js文件.

<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="/content/typings/angular2/bundles/angular2-polyfills.js"></script>
<script src="/content/typings/rxjs/bundles/Rx.min.js"></script>
<script src="/content/typings/angular2/bundles/angular2.dev.js"></script>
<script src="/content/typings/angular2/bundles/router.dev.js"></script>

然后你的导入将如下所示:

import { Component } from 'angular2/core';

系统配置

要使导入起作用,您需要配置System.配置相当简单:

        System.paths = {
            'boot': '/content/typings/boot.js',
            'mymodule/*': '/content/typings/myModule/*.js'
        };
        System.config({
            meta: {
                'traceur': {
                    format: 'global'
                },
                'rx': {
                    format: 'cjs'
                }
            }
        });
        System.import('boot');

在 angular和所有其他librairies的脚本标记之后包含此代码.

由于Angular2是全局包含的(通过脚本标记),因此您无需将其添加到系统配置中.然后在您的文件中,您可以这样导入模块:

import { MyThing } from "mymodule/whatever";

Answer 2

我通常对 asp.net 5 vnext 和 Angular 2 的新功能感到满意。但是在 Visual Studio 中安装 Angular 2 一直很麻烦。我虔诚地遵循 angular.io 快速入门指南，但没能运行 Hello Angular 2 应用程序，直到我使用了以下代码：

<script src="~/lib/anguar2/angular2-polyfills.js"></script>
<script src="~/lib/es6-shim/es6-shim.js"></script>
<script src="~/lib/systemjs/system.js"></script>
<script>

    System.config({
        defaultJSExtensions: true
      
    });

</script>
<script src="~/lib/rxjs/rx.js"></script>
<script src="~/lib/anguar2/angular2.min.js"></script>
<script>
    System.import('js/boot');
</script>

我希望我能更好地理解为什么它可以工作，而有角度的样板却不能。但至少我让它发挥作用了。希望这可以帮助。