如何在使用TypeScript的Visual Studio 2015中使用angular2？

时间：2015-11-02 08:15:46

标签： asp.net-mvc-5 typescript visual-studio-2015 angular

我正在尝试Angular 2 Visual Studio 2015与Typescript一起工作。我想尝试在MVC 5类型的网络项目（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）并复制了下载的TypeScript文件夹中的所有modules。包括所有子文件夹（减去 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构建我的解决方案？

注意：我认为这个“非常长的示例/教程”是我正在寻找的，除了它适用于MVC 6（.NET Core）而不是MVC 5：http://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/ < / p>

4 个答案:

答案 0 :(得分：14)

我认为您使用Visual Studio 2015的旧npm版本存在问题。我建议您打开Visual Studio的“输出”窗口，然后从＆＃34; Bower / npm＆＃34;中选择“显示输出”。您将看到如下图所示的内容：

enter image description here

输出的最大输入线很长并且被切断。我把它包括在内：

  

npm ERR！命令＆＃34; C：\ Program Files（x86）\ Microsoft Visual Studio   14.0 \ Common7 \ IDE \ Extensions \ Microsoft \ Web Tools \ External \\ node \ node＆＃34; ＆＃34; C：\ Program Files（x86）\ Microsoft   Visual Studio 14.0 \ Common7 \ IDE \ Extensions \ Microsoft \ Web   工具\外部\ NPM \ node_modules \ NPM \ BIN \ NPM-cli.js＆＃34; ＆＃34;安装＆＃34;

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

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

  • 安装最新版本的NodeJs。您可以从https://nodejs.org/en/下载。如果您更喜欢使用x64版本，那么我建议您验证是否已在npm中安装了x86。如果存在x86-version，则在开始安装x64-version之前将其卸载。之后，您可以安装Nodejs。今天它将是来自C:\Program Files (x86)\nodejs的NodeJs 5.0.0。
  • 然后您可以在管理员模式下启动命令提示符（它不是mandotory）并使用node-v5.0.0-x64.msi更新npm update -g或使用npm安装最新版本。我建议您在安装之前和之后使用npm install -g npm@latest来验证是否安装了最新版本。今天它的版本是3.3.12。根据您安装/更新npm -v的方式，您可以将其安装在npm或C:\Program Files\nodejs\node_modules\npm（例如，版本%AppData%\npm）或两个目的地。
  • 您应该在管理员权限下启动文本编辑器（例如，开始菜单，搜索，键入C:\Users\Oleg\AppData\Roaming\npm，然后按 Ctrl + Shift + Enter ）。之后，您应修改文件notepad.exe并将内容设置为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部分中保存"angular2": "^2.0.0-alpha.45"条目，"devDependencies"即可，安装将成功。你可能会看到像

这样的警告

enter image description here

因为你现在使用＆＃34;太好＆＃34;版本"dependencies"：版本3.3.12而不是某些npm版本（基于依赖包2.x.x的规则"npm":"~2.0.0"）。

P.S。如果您使用MVC5而不是MVC6的预发布版本（ASP.NET 5），可能还有其他错误消息，但主要问题是相同的。您必须安装新版本的node和npm并修改reactivex/rxjs以使用新版本的npm。

答案 1 :(得分：3)

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

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

答案 2 :(得分：1)

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

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

https://github.com/aspnet/JavaScriptServices

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

答案 3 :(得分：-1)

我开始工作了。

npm install。从node_modules文件夹中，删除除angular2和systemjs之外的所有文件夹。在angular2文件夹中删除除bundle之外的所有内容。在你的bundle / typings文件夹中删除除angular2以外的所有文件。

文件夹结构如下所示：

node_modules
  -- angular2
     -- bundles
        -- typings
           --angular2
  -- systemjs
相关问题
最新问题