Node.js 为Angular2启动Visual Studio 2015项目

我使用stackoverflow Extensive来了解如何让Angular2在Visual Studio 2015 pro中工作。没有真正的答案，但以下是我发现有效的方法。 我已经看过很多关于如何让Visual Studio 2015 Pro使用Angular2项目的说明和示例。现在，使用VisualStudio社区或使用任何其他编辑器的所有说明都有点让人困惑。这是我通过自己的实验发现的，也是雅科夫·费恩和安东·莫西耶夫关于“Angular 2 Development with Typescript”主题的一本好书的开头。可从曼宁出版社获得。无论如何，这里是我的一个项目的基本设置

首先安装Nodejs，这样您就可以在包管理器中使用它了。不要通过NuGet来完成，只需从网站安装Windows安装包即可。我也尝试了另一个pakcage管理器，但我认为Node有最新的软件包。接下来，您可以运行npminit，它将创建一个默认的package.json文件。然后编辑它，使其看起来或多或少像以下内容：

{ 
  "name": "helloworld", 
  "version": "1.0.0", 
  "description": "test npm setup", 
  "main": "main.ts", 
  "scripts": { 
    "start": "live-server" 
  }, 
  "author": "name", 
  "license": "ISC", 
    "dependencies": { 
"angular2": "2.0.0-beta.0", 
"es6-promise": "^3.0.2", 
"es6-shim": "^0.33.3", 
"reflect-metadata": "0.1.2", 
"rxjs": "5.0.0-beta.0", 
"systemjs": "0.19.8", 
"zone.js": "0.5.10" 
}, 
"devDependencies": { 
"live-server": "^0.8.2", 
"typescript": "1.7.5" 
} 
} 

现在您已经有了package.json文件，接下来是在项目目录中获得一个命令提示符，并键入以下内容：

{ 
  "name": "helloworld", 
  "version": "1.0.0", 
  "description": "test npm setup", 
  "main": "main.ts", 
  "scripts": { 
    "start": "live-server" 
  }, 
  "author": "name", 
  "license": "ISC", 
    "dependencies": { 
"angular2": "2.0.0-beta.0", 
"es6-promise": "^3.0.2", 
"es6-shim": "^0.33.3", 
"reflect-metadata": "0.1.2", 
"rxjs": "5.0.0-beta.0", 
"systemjs": "0.19.8", 
"zone.js": "0.5.10" 
}, 
"devDependencies": { 
"live-server": "^0.8.2", 
"typescript": "1.7.5" 
} 
} 

Npm安装

这将创建一个node_modules文件夹，其中包含angular2可用的所有包

接下来，您需要转到project/properties/TypeScript构建部分，并在页面的模块系统部分中单击“CommonJS”。接下来，您需要右键单击项目并卸载它，右键单击并编辑。查看以下部分：

<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> 

在该部分底部附近添加以下两行：

<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 
 <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 

True
真的

好的，我们差不多完成了。您需要在node_modules文件夹中查找：

/节点\u模块/typescript/lib/typescript.d.ts

并通过右键单击该项目并选择“包含在项目中”，将其包含在项目中。我认为在这方面有一些变化，使VS安装的typescript与Angular2一起工作，不足以让专家知道，经过大量的尝试后，才知道错误是主要的关键。现在，我也因为不喜欢看到红色的杂音，进入Index.html或任何你称之为引导html的页面，找到我的每个包含源代码并包含它们，这并不是必需的，只是不那么烦人。以下是我对一个基本应用程序的支持：

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/typescript/lib/typescript.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

---

我不敢相信我花了多少时间得出这个结论。我阅读了多种不同的、有时相互矛盾的方法来实现这一目标。我希望这能帮助一个新手度过难关

@M.Gamble-假设您使用ASP.NET核心web应用程序使用VS 2015运行Angular 2，则遵循此链接

---

如果您正在寻找ASP.NETMVC5，请浏览上述链接的评论部分。它们可能会帮助您。

在最近的一些实验之后，我发现如果您将tsconfig.json文件添加到项目的根目录中，就可以避免在项目文件中设置键。如果Visual Studio 2015找到一个tsconfig文件，它将使用该文件并灰显属性的正常TypeScript构建部分。一个警告是，如果在启动项目后添加一个，您可能必须退出项目，甚至重新启动。VS.

您是否尝试在该json文件中添加

tsconfig.json

&设置typescript配置。。我的代码也有类似的问题。。你可以说不。我对Angular有点陌生，决定跳过angularjs跳到angular2。我无法证明这一点，但如果您是从vs内部运行项目，我认为它会忽略tsconfig.json文件。我在Chrome上运行这个应用程序，你可以在IE上运行它，但必须为它添加脚本标签。在我进一步阅读这本书之后，我在导入的路径上遇到了一些问题。同样，我也不是一个角度专家，我将我的项目复制到了一个页面，并添加了tsconfig.json和config.js。在这一点上，我注意到了一个变化，我不相信我看到了，直到最近的VS2015更新2，VS将项目属性的整个Typescript部分灰显，我想这是一条关于使用json配置的消息。所以我知道VS将使用这些节点/类型脚本设置是一个事实。请注意，您仍然只能在Chrome中运行它。缺少包含..不，我是从Typescript html应用程序的Typescript模板开始的。我知道这不完全是一个答案，但我正在努力让像我这样的新手远离麻烦。经过一些黑客攻击之后，您无法将/node_modules/angular2/ts/typings/tsd.d.ts作为包含添加到项目中，而是使用tsd并执行以下操作：tsd query angular2--action install，只需记住包含它随后添加的脚本目录tat。在执行类似import{x，y}的操作时，我还遇到了重复的导入从“”开始。Angular2，typescript在使用本地服务器时没有问题，VS仍然可以运行一个Chrome会话，没有问题，只有错误。如果您将这些导入中的每个导入放在单独的行中，则不会出现错误。现在，我得到了一个示例项目，其中包含八个模块，可以毫不费力地编译和运行。