如何让 angular2 在 Visual Studio 2015 中使用 TypeScript 工作？

Question

我正在努力让 Angular 2 在 Visual Studio 2015 中与 Typescript 一起工作。我正在尝试让最基本的示例在 MVC 5 类型的 Web 项目中工作（web.config 而不是 config.json）：

import {Component, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

我正在尝试完成这项工作所需的最少的东西。所以我下载了最新的 Angular 2 (alpha .45) 并复制了下载的 modules 文件夹中的所有 TypeScript。包括所有子文件夹（减去 docs 和 examples。）

我确信这会在 Visual Studio 之外工作，就像我以前做过的那样，但我试图让它在 Visual Studio 中工作并且它给了我超过 3,000 个错误并且看起来是因为我缺少其他模块或其他东西。

这里有一些我遗漏的东西：

地图（default_keyvalue_differ.ts，以及许多其他）：

export class DefaultKeyValueDiffer implements KeyValueDiffer {
  private _records: Map<any, any> = new Map();

断言 (lexer.ts):

  scanCharacter(start: number, code: number): Token {
    assert(this.peek == code);

设置 (command_compiler.ts):

function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] {
  var knownPairs = new Set();

startsWith (shadow_css.ts)

rule.selector.startsWith('@page')

需要 (parse5_adapter.ts)

var parse5 = require('parse5/index');

@reactivex/rxjs/dist/cjs/Rx (async.ts)

export {Subject} from '@reactivex/rxjs/dist/cjs/Rx';

远不止于此。所以我的第一个问题是，我真的需要所有这些东西，还是不需要其中的一些东西。第二，更重要的是，我如何获得 Visual Studio 来构建我的解决方案？

注意：我认为这个 "very long example/tutorial" 是我一直在寻找的，除了它适用于 MVC 6（.NET Core）而不是 MVC 5：http://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/

Answer 1

我成功了。

npm 安装。从 node_modules 文件夹中，删除除 angular2 和 systemjs 之外的所有文件夹。在 angular2 文件夹中删除除捆绑包之外的所有内容。在您的 bundles/typings 文件夹中删除除 angular2 之外的所有内容。

文件夹结构如下所示：

node_modules
  -- angular2
     -- bundles
        -- typings
           --angular2
  -- systemjs

Answer 2

我想你对使用 Visual Studio 2015 的旧 npm 版本有问题。我建议你打开 Visual Studio 的输出 window 并选择显示输出来自 "Bower/npm"。您将在下图中看到类似的内容：

输出的最导入行很长，被删掉了。我把它包括在 separetels:

npm ERR! command "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node\node" "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\bin\npm-cli.js" "install"

换句话说，重要的是要了解 Visual Studio 2015 使用了一些工具，包括 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External 目录中的 npm。 Angular2 有依赖包 reactivex/rxjs，需要 "npm":"~2.0.0"，但是 Visual Studio 使用旧的 1.4.9 版本（你可以验证 version of "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\package.json"） .即使您安装最新版本的 Nodejs 和 npm 也无济于事，因为 Visual Studio 2015 将使用相同的旧版本 npm.

要解决此问题，我建议您执行以下操作：

安装最新版本的 NodeJs。您可以从 https://nodejs.org/en/ 下载它。如果您更喜欢使用 x64 版本，那么我建议您确认您已经在 C:\Program Files (x86)\nodejs 中安装了 x86。如果存在 x86 版本，则在开始安装 x64 版本之前将其卸载。之后你就可以安装Nodejs了。今天是 node-v5.0.0-x64.msi.
然后您可以在管理员模式下启动命令提示符（这不是强制性的）并使用 npm update -g 更新 npm 或使用 npm install -g npm@latest 安装最新版本。我建议您在安装前后使用 npm -v 来验证您安装的是最新版本。今天是 3.3.12 版。根据您 installed/updated npm 的方式，您可以将其安装在 C:\Program Files\nodejs\node_modules\npm 或 %AppData%\npm（例如目录 C:\Users\Oleg\AppData\Roaming\npm）或两个目的地。
您应该在管理员权限下启动文本编辑器（开始菜单，搜索，例如键入 notepad.exe，然后按 Ctrl+Shift+Enter）。之后你应该修改文件 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd 并将内容设置为 @"C:\Program Files\nodejs\node.exe" "%AppData%\npm\node_modules\npm\bin\npm-cli.js" %* 或 @"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" %*

之后你可以只保存 package.json 在 "devDependencies" 或 "dependencies" 部分有类似 "angular2": "^2.0.0-alpha.45" 的条目，安装就会成功。您可能只会看到

这样的警告

因为你现在使用npm的"too good"版本：版本3.3.12而不是某些2.x.x版本（基于依赖包的规则"npm":"~2.0.0" reactivex/rxjs).

P.S。如果您使用 MVC5 而不是 MVC6 的预发布版本 (ASP.NET 5)，您可能会收到一些其他错误消息，但主要问题是相同的。您必须安装新版本的 node 和 npm 并修改 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd 才能使用新版本的 npm。

Answer 3

我的答案是针对 MVC6（没看到需要 MVC5）

我建议使用 入门模板。我可以推荐一个模板，它也使用 HMR 和 Angular 通用（用于 SEO 和更快的页面加载的服务器端渲染）：

https://github.com/aspnet/JavaScriptServices

开始： http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

Answer 4

我知道 SO 不热衷于粘贴指向内容的链接，但这是一个相当大的教程，只需将粘贴复制到此处...它的所有部分都与回答问题相关。无论如何，这是 Angular 2 团队提供的教程，让 NG2 在 Visual Studio MVC 5 中工作：

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

如何让 angular2 在 Visual Studio 2015 中使用 TypeScript 工作？

How can I get angular2 to work in Visual Studio 2015 with TypeScript?

typescript

asp.net-mvc-5

visual-studio-2015

angular