logo标签列表

Angular 2 Beta: Visual Studio ASP .NET MVC

typescriptvisual-studio-2015angularsystemjs
16

我曾经为 Angular 2 alpha 45 构建了一个应用程序，它的运行效果非常好，但是我不得不进行大量的“折腾”才能让它正常工作。我理解 Angular 2，但我不知道如何开始使用 Angular 2。

我正在尝试进行一个干净的构建，使用 'Angular 2: 5 min Quickstart'。有很多问题，我会尽可能具体地描述。我想学习这些问题的原因，并希望找到解决方法。 Visual Studio 2015 Update 1，Typescript 1.7。

Typescript 配置： 快速入门包括一个 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文件需要在/脚本中才能工作，但对我也没有用。

我想知道如何使这个tsconfig文件能够工作，或者编辑.csproj文件以获得相同的编译器选项。如果您查看项目属性>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')，而不指定文件扩展名。这是Visual Studio的问题还是.NET MVC的问题？如果我在index.html中指定文件扩展名，那么System.js会尝试查找没有文件扩展名的组件文件，结果返回404（即使配置已经设置了defaultExtension: 'js'）。这是因为我需要在项目中包含js文件吗？如果我解决了那个问题，接下来还需要处理的是

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

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

我觉得这些都是由不同的系统以不同的方式解释 TypeScript 所创建的问题。我觉得我表达得不够清楚，但我不知道如何更清晰地表达这个问题。我真的很感激您能给我任何帮助和指导。我感觉我已经搜索了好几天了，但仍然找不到答案。

5个回答
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版本，您需要在附加标志（旧版本）或专用标签中指定标志。您仍需要在项目选项中检查sourcemaps和es目标版本（es5是EcmaScript版本中的EcmaScript 5，显然）。

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

Angular2文件

通过npm下载angular2是有道理的，但我不会直接将node_modules包含在typescript文件夹中。包含整个文件夹意味着带上每个其他的节点模块，比如gulp等。相反，您可以简单地将整个angular2文件夹复制到typescript目录中，在Content文件夹中（如果您想，可以使用gulp或简单的bat文件自动完成此操作）。

关于typescript错误，问题在于Visual Studio将尝试分析angular2文件夹中的所有文件，其中一些文件是重复的。您需要删除源文件并仅保留编译后的JS文件和类型定义。也就是说：

  • 删除/es6（它们是用于在es6而不是typescript中开发的文件）
  • 删除/ts（源文件）
  • 删除bundles/typings（es6-shim和jasmine的附加定义文件）

您需要将rxjs文件夹放在与angular2相同的文件夹级别上，否则包含关系无法正常工作，例如：

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.paths = {
            'boot': '/content/typings/boot.js',
            'mymodule/*': '/content/typings/myModule/*.js'
        };
        System.config({
            meta: {
                'traceur': {
                    format: 'global'
                },
                'rx': {
                    format: 'cjs'
                }
            }
        });
        System.import('boot');

在引入Angular和其他库的脚本标签之后，将此代码包含进去。
由于Angular2已经被全局引入（通过脚本标签），所以您不需要将其添加到系统配置中。然后，在您的文件中，您可以通过以下方式导入模块：
import { MyThing } from "mymodule/whatever";
谢谢Camillie。我不得不删除另一个文件夹才能让'typings'编译。angular2/bundles - om471987
1
啊，你说得对，我忘记了bundles/typings。谢谢你提醒我。 - Camille Wintz
3
如果你已经使用npm install安装了依赖项到node_modules中，以下是如何在原地使用它们而不必将它们移动到/lib或/scripts目录，或更改你编写typescript文件的方式（与Quickstart中所示的方式不同）：

项目属性 -> TypeScript Build

对于“模块系统”，选择“System”：

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包，否则系统加载器会再次下载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>

应用程序 TypeScript 可以使用标准的导入语法，这是 app/main.ts：

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

请注意，Angular2的“导入”不需要添加“../node_modules/”，因为TypeScript编译器的模块解析使用“node”模式。(有关节点模块解析逻辑的文档: https://github.com/Microsoft/TypeScript/issues/2338)希望对您有所帮助！
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>

我希望我能更好地理解为什么这个可以工作，而 Angular 的样板却不能。但至少我已经让它工作了。希望这有所帮助。

1

我遇到了完全相同的问题（在使用项目alpha 48时，beta 0等版本也出现了同样的错误）。我的工作文件（MVC项目）：

App/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/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 {}

Views/Shared/_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>

Views/Home/Index.cshtml

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

在System.config中添加“paths”后，它对我起作用了。
我正在尝试这个解决方案，但我的导入始终无法解析为根目录(host)，而是Home...。你有什么建议吗？ - KnowHoper
1
请确保您使用的是Visual Studio 2015 Update 1、Typescript 1.7.*，同时您可以运行“Angular 2: 5分钟快速入门”。
如果VS2015中的“外部Web工具”版本太旧，则会出现问题。
在VS 2015创建asp.net5 Web应用程序后，单击“显示所有文件”，然后删除package.json和node_modules文件夹，并再次添加package.json。
如果上述方法无效，请参考此链接：http://jameschambers.com/2015/09/upgrading-npm-in-visual-studio-2015/。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接