Angular 2 Beta:Visual Studio ASP .NET MVC问题如何解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (28)

我为Angular 2 alpha 45构建了一个应用程序,它的工作非常好,但我不得不为了让它工作而“乱搞”。我了解Angular 2,但我不明白如何让它开始实际使用Angular 2。

我正在尝试'Angular 2: 5 min Quickstart'的干净版本。有一些问题,我将尽可能具体。我想知道为什么会发生这些问题,并希望如何解决这些问题。Visual Studio 2015 Update 1,Typescript 1.7。

Typescript配置: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文件需要在/脚本工作,但这也不适用于我。

我想知道如何让tsconfig文件起作用,或者编辑.csproj文件以获得相同的编译器选项。如果您查看“项目属性”>“打字稿生成”。这些是重要的吗?模块系统应该是:系统?

我的文件结构与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。另外:我正在做这个干净的构建,因为我无法弄清楚如何将项目从alpha45更新到beta0。修复我的项目中来自Angular2的更改很容易,但让应用程序将所有模块加载到这一刻是不可能的。

接下来的部分是假设我通过构建错误:在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,那么我得到404s与System.js试图找到没有文件扩展名的组件文件(即使配置有defaultExtension: 'js'。是因为我需要包括在我的项目中的js文件?然后,如果我经过这个问题,我必须处理

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

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

我觉得这些都是由不同的系统以不同的方式解释打字稿所产生的所有问题。我觉得我不清楚,但我不知道如何清楚这个问题。我真的很感谢你能给我的任何帮助和指导。我觉得现在我一直在寻找这个问题的答案。

提问于
用户回答回答于

如果正在使用npm install来运行并将依赖关系提取到node_modules中,那么以下是如何在原地使用它们,而不必将它们移动到/ lib或/ scripts目录中,或者更改从编写脚本文件的方式快速入门中显示的方式:

项目属性 - > TypeScript Build

对于“模块系统”,选择“系统”:

设置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);

请注意,由于TypeScript编译器的模块分辨率正在使用“节点”模式,所以angular2“import”不需要预先添加“../node_modules/”。(docs节点模块解析逻辑:https//github.com/Microsoft/TypeScript/issues/2338

用户回答回答于

我在开始时也遇到了一些问题,但他们大多很容易修复。

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版本,需要在附加标志(旧版本)或专用标签中指定标志。仍然需要检查项目选项中的源代码和目标版本(显然,EcmaScript版本中的EcmaScript 5是es5)。

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

Angular2文件

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

关于打字稿错误,问题是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.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";

扫码关注云+社区