在 Visual Studio 2015 for Angular2 上启动项目

Question

我广泛使用 stackoverflow 来弄清楚如何让 Angular2 在 Visual Studio 2015 pro 中工作。没有真正的答案，但这是我发现有效的方法。 我看过一堆，我的意思是一堆关于如何让 Visual Studio 2015 Pro 与 Angular2 项目一起工作的说明和示例。现在这与使用 Visual Studio Community 或使用任何其他编辑器的所有说明有点混淆。这是我使用自己的实验发现的，也是 Yakov Fain 和 Anton Moiseev 撰写的一本关于“使用 Typescript 的 Angular 2 开发”主题的好书的开头。可从 Manning 出版物获得。无论如何，这是我对项目的基本设置。

首先安装 Nodejs，这样你就可以将它用于你的包管理器。不要乱用 NuGet，只需从网站安装 Windows 安装包。我也尝试过另一个包管理器，但我认为 Node 有最新的包。接下来你可以运行 npm init ，它会创建一个默认的 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 文件，接下来是在您的项目目录中获取命令提示符并键入以下内容：

npm 安装

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

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

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

在该部分的底部附近添加接下来的两行：

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

好的，我们差不多完成了。您需要走下 node_modules 文件夹并找到：

/node_modules/typescript/lib/typescript.d.ts

并通过右键单击它并选择包含在项目中来将其包含在您的项目中。我认为在这方面有一些变化，使打字稿的 VS 安装与 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>

我不敢相信我花了多少时间得出这个结论。我阅读了多种不同且有时相互冲突的方法来完成这项工作。我希望这可以帮助一个新手克服困难！

Answer 1

@M.Gamble - 假设您使用 ASP.NET Core Web 应用程序使用 VS 2015 运行 Angular 2，然后点击此链接 http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

如果您正在寻找 ASP.NET MVC 5，请浏览上述链接的 cmets 部分。他们可能会帮助你。

Answer 2

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