Angular 2 Beta：Visual Studio ASP .NET MVC

时间：2015-12-16 19:06:26

标签： typescript visual-studio-2015 angular systemjs

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

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

打字稿配置： quickstart包含一个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文件以获得相同的编译器选项。如果您查看项目属性＆gt;打字稿构建。这些重要吗？模块系统应该是：系统？

我的文件结构与快速入门相同。

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 with System.js试图找到没有文件扩展名的组件文件（即使配置有defaultExtension: 'js'。这是因为我需要包括我的项目中的js文件？如果我过了那个问题，我必须处理

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

我没有一个构建错误，但现在System.js没有加载任何内容。

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

5 个答案:

答案 0 :(得分：9)

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

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文件和类型定义。这意味着：

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

你需要与angular2处于同一文件夹级别的rxjs文件夹，否则包含不会起作用，即：

Content  
    typings  
        angular2  
        rxjs  
        mymodule
           whatever.ts
        boot.ts

在你的html文件中，你可以链接angular2和rxjs的包文件夹中的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');

在角色和所有其他图书馆的脚本标记之后包含此代码 。

由于全局包含Angular2（通过脚本标记），因此您无需将其添加到系统配置中。然后在您的文件中，您可以通过以下方式导入模块：

import { MyThing } from "mymodule/whatever";

答案 1 :(得分：3)

如果您已经启动并运行npm install将依赖项提取到node_modules，那么这里是如何在那里使用它们而不必将它们移动到/ lib或/ scripts目录中，或者更改您从Quickstart中显示的方式编写打字稿文件的方式：

项目属性 - ＆gt; TypeScript Build

对于＆＃34;模块系统＆＃34;，选择＆＃34;系统＆＃34;：

enter image description here

设置TypeScript编译器选项

如果使用ASP.NET Core，请在tsconfig.json中设置选项：

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

如果您使用的是ASP.NET（非核心），请在csproj文件中设置编译器选项。 （用于设置编译器选项的文档：https://github.com/Microsoft/TypeScript/wiki/Setting-Compiler-Options-in-MSBuild-projects）在文本编辑器中，使用其他TypeScript选项查找PropertyGroup并添加：

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
<TypeScriptModuleResolution>node</TypeScriptModuleResolution>

按正确顺序加载源文件

在index.html中，按照特定的顺序设置脚本，以确保从node_modules文件夹加载模块（在执行System.config之后必须加载rxjs和angular2 bundle ，否则系统加载程序将再次下载angular / rxjs源文件，因为它没有用正确的路径注册它们。

<!-- load system libraries -->
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="~/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/node_modules/systemjs/dist/system.js"></script>

<!-- configure system loader first -->
<script>
    System.config({
        defaultJSExtensions: true,
        paths: {
            'angular2/*': 'node_modules/angular2/*',
            'rxjs/*': 'node_modules/rxjs/*'
        }
    });
</script>

<!-- load app bundles *after* configuring system so they are registered properly -->
<script src="~/node_modules/rxjs/bundles/Rx.js"></script>
<script src="~/node_modules/angular2/bundles/angular2.js"></script>

<!-- boot up the main app -->
<script>
    System.import("app/main").then(null, console.error.bind(console));
</script>

App TypeScript可以使用标准导入语法，这里是app / main.ts： 

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

注意angular2＆＃34; import＆＃34;不需要有＆＃39; ../ node_modules /＆＃39;因为TypeScript编译器的模块分辨率正在使用＆＃34; node＆＃34;模式。 （关于节点模块解析逻辑的文档：https://github.com/Microsoft/TypeScript/issues/2338）希望对你有用！

答案 2 :(得分：2)

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

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我希望我能更好地理解为什么这种方法有效，并且角度样板并没有。但至少我弄明白了。希望这可以帮助。

答案 3 :(得分：1)

我有完全相同的问题（工作项目alpha 48，与beta 0相同的错误，等等）。我的工作文件（MVC项目）：

应用/ boot.ts 

/// <reference path="../node_modules/angular2/manual_typings/globals-es6.d.ts" />
/// <reference path="../node_modules/angular2/typings/es6-shim/es6-shim.d.ts" />
import {bootstrap}    from '../node_modules/angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

应用/ app.component.ts 

import {Component} from '../node_modules/angular2/core'
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent {}

<强>查看/共享/ _Layout.cshtml 

<head>
...
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script>
 System.config({
   defaultJSExtensions: true,
   packages: {
     'app': { format: 'register', defaultExtension: 'js'}
   },
   paths: {
     'angular2/*': 'node_modules/angular2/*',
     'rxjs': 'node_modules/rxjs/bundles/Rx.js'
   }
 });
</script>
<script src="~/node_modules/rxjs/bundles/Rx.js"></script>
<script src="~/node_modules/angular2/bundles/angular2.dev.js"></script>
<base href="/">
@Scripts.Render("~/bundles/modernizr")
...
</head>

<强>查看/主页/ Index.cshtml 

<my-app>Loading...</my-app>
<script>
  System.import('App/boot')
   .then(null, console.error.bind(console));
</script>

在System.config中添加'paths'后，它对我有用。

答案 4 :(得分：1)

确保您使用的是Visual Studio 2015 Update 1，Typescript 1.7。* 而且你也可以运行'Angular 2：5 min Quickstart'。

VS2015“外部网络工具”的问题太旧了

在VS 2015创建asp.net5 Web应用程序后，单击show all file然后删除package.json和node_modules文件夹并再次添加package.json。

如果以上操作不起作用，请参阅：http://jameschambers.com/2015/09/upgrading-npm-in-visual-studio-2015/

相关问题
最新问题