我正在努力打造‘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";