typescript – Angular 2 Beta：Visual Studio ASP .NET MVC

发布时间：2020-12-17 08:06:46 所属栏目：安全来源：网络整理

导读：我为Angular 2 alpha 45构建了一个应用程序，它的工作非常好，但是我不得不“乱七八糟”，让它工作。我知道Angular 2，但是我不明白如何让它开始实际使用Angular 2。我正在努力打造‘Angular 2: 5 min Quickstart’的清洁建筑。有一些问题，我将尽可能具体

我为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>真< / TypeScriptExperimentalDecorators>
摆脱实验装饰错误。
https://github.com/Microsoft/TypeScript/issues/3124似乎建议tsconfig文件需要在/ Scripts工作，但这对我也不行。

我想知道如何使这个tsconfig文件工作，或者编辑.csproj文件以获得相同的编译器选项。如果您查看项目属性> Typescript构建。这些都是重要的吗？模块系统应该是：系统？

我的文件结构与Quickstart相同。

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

我使用powershell来运行npm安装来获取node_modules目录中的所有内容。

从“angular2 / core”导入{Component};显示错误。 ../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没有加载任何东西。

我觉得这些都是不同系统创建的问题，解释不同的打字稿。我觉得我还不清楚，但是我不知道如何清楚这个问题。我真的很感激你可以给我的任何帮助和指导。我觉得我一直在寻找这个答案几天。

最初我也遇到了一些问题，但是它们很容易解决。

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是有意义的，我不会直接在你的typescript文件夹中包含node_modules。包括整个文件夹意味着像其他节点模块一样，例如gulp。相反，您可以简单地复制您的typescript目录中的整个angular2文件夹，在“内容”文件夹中(如果需要，可以使用gulp或一个简单的bat文件自动进行)。

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

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

您需要与angular2相同的文件夹级别的rxjs文件夹，否则include将无法正常工作，即：

Content  
    typings  
        angular2  
        rxjs  
        mymodule
           whatever.ts
        boot.ts

在您的html文件中，您可以链接角度2和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";

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!