[英]How can I get angular2 to work in Visual Studio 2015 with TypeScript?
I am trying to get Angular 2
to work in Visual Studio 2015
with Typescript
. 我试图让
Angular 2
在带有Typescript
Visual Studio 2015
中Typescript
。 I am trying to get the most basic example to work in an MVC 5
type web project ( web.config
instead of config.json
): 我想尝试在
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);
I'm trying the most minimal things needed to make this work. 我正在尝试使这项工作所需的最小的东西。 So I downloaded the most recent Angular 2 (alpha .45) and copied over all of the
TypeScript
in the downloaded modules
folder. 所以我下载了最新的Angular 2(alpha .45)并复制了下载的
modules
文件夹中的所有TypeScript
。 Including all of the subfolders ( minus the docs
and examples
ones.) 包括所有子文件夹( 减去
docs
和examples
。)
I am sure that this will work outside of Visual Studio
as I have done this before, but I am trying to get it to work in Visual Studio
and it is giving me over 3,000 errors and it looks like it is because I am missing other modules or something. 我确信这将在
Visual Studio
之外工作,因为我之前已经这样做了,但我试图让它在Visual Studio
工作,它给了我超过3,000个错误,它看起来像是因为我错过了其他模块或者其他的东西。
Here are a couple of the things I am missing: 以下是我遗漏的几件事:
Map ( default_keyvalue_differ.ts
, and many others): Map (
default_keyvalue_differ.ts
等等):
export class DefaultKeyValueDiffer implements KeyValueDiffer {
private _records: Map<any, any> = new Map();
assert ( lexer.ts
): 断言 (
lexer.ts
):
scanCharacter(start: number, code: number): Token {
assert(this.peek == code);
Set (command_compiler.ts): 设置 (command_compiler.ts):
function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] {
var knownPairs = new Set();
startsWith (shadow_css.ts) startsWith (shadow_css.ts)
rule.selector.startsWith('@page')
require (parse5_adapter.ts) require (parse5_adapter.ts)
var parse5 = require('parse5/index');
@reactivex/rxjs/dist/cjs/Rx (async.ts) @ reactivex / rxjs / dist / cjs / Rx (async.ts)
export {Subject} from '@reactivex/rxjs/dist/cjs/Rx';
There is much more than this. 还有更多。 So my 1st question is, do I really need all of this stuff, or is some of it not required.
所以我的第一个问题是,我真的需要所有这些东西,还是其中一些不需要。 2nd and more importantly, how do I get
Visual Studio
to build my solution? 第二,更重要的是,我如何让
Visual Studio
构建我的解决方案?
Note : I think this "very long example/tutorial" is what I was looking for except it's geared for MVC 6 (.NET Core) instead of MVC 5: http://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/ 注意 :我认为这个“非常长的示例/教程”是我正在寻找的,除了它适用于MVC 6(.NET Core)而不是MVC 5: http : //chsakell.com/2016/01/01/cross-平台的单页的应用程序与- ASP-净-5-角度-2-打字稿/
I suppose you have the problem with old npm
version which uses Visual Studio 2015. I recommend you to open Output window of Visual Studio and to choose Show output from "Bower/npm". 我想你有使用Visual Studio 2015的旧
npm
版本的问题。我建议你打开Visual Studio的Output窗口,然后从“Bower / npm”中选择Show output。 You will see something like on the picture below: 您将看到如下图所示的内容:
The most imported line of the output is long and it's cut. 输出中输入最多的线很长并且被切断。 I include it separetels:
我包括它separetels:
npm ERR!
错误的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"
命令“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“
In other words, it's important to understand that Visual Studio 2015 uses some tools inclusive npm
from C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External
directory. 换句话说,了解Visual Studio 2015使用包含来自
C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External
目录的npm
一些工具非常重要。 Angular2 have dependency package reactivex/rxjs
, which require "npm":"~2.0.0"
, but Visual Studio uses old 1.4.9
version instead (you can verify the version
of "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm\\node_modules\\npm\\package.json"
). Angular2有依赖包
reactivex/rxjs
,这需要"npm":"~2.0.0"
但Visual Studio使用旧的1.4.9
版本,而不是(可以验证version
的"C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm\\node_modules\\npm\\package.json"
)。 Even if you would install the latest version of Nodejs and npm it will not help because Visual Studio 2015 will use the same old version of npm
. 即使您安装最新版本的Nodejs和npm也无济于事,因为Visual Studio 2015将使用相同的旧版本的
npm
。
To fix the problem I suggest you to do the following: 要解决此问题,我建议您执行以下操作:
C:\\Program Files (x86)\\nodejs
. C:\\Program Files (x86)\\nodejs
安装了x86。 If x86-version exist, then uninstall it before starting installation of x64-version. node-v5.0.0-x64.msi
. node-v5.0.0-x64.msi
NodeJs 5.0.0。 npm update -g
to update npm
or to use npm install -g npm@latest
to install the latest version. npm update -g
更新npm
或使用npm install -g npm@latest
来安装最新版本。 I recommend you to use npm -v
before and after the installation to verify that you install the latest version. npm -v
来验证是否安装了最新版本。 Today it's version 3.3.12. npm
you can have it installed either in C:\\Program Files\\nodejs\\node_modules\\npm
or in %AppData%\\npm
(the diretcory C:\\Users\\Oleg\\AppData\\Roaming\\npm
for example) or in both destinations. npm
您可以将它安装在C:\\Program Files\\nodejs\\node_modules\\npm
或%AppData%\\npm
(例如,目录C:\\Users\\Oleg\\AppData\\Roaming\\npm
)或在两个目的地。 notepad.exe
for example and press Ctrl+Shift+Enter ). notepad.exe
,然后按Ctrl + Shift + Enter )。 After that you should modify the file C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm.cmd
and set as the content something like @"C:\\Program Files\\nodejs\\node.exe" "%AppData%\\npm\\node_modules\\npm\\bin\\npm-cli.js" %*
or @"C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" %*
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" %*
After that you can just save package.json
having the entry like "angular2": "^2.0.0-alpha.45"
in "devDependencies"
or "dependencies"
section and the installetion will be successful. 之后,您可以在
"devDependencies"
或"dependencies"
部分中保存package.json
,其条目如"angular2": "^2.0.0-alpha.45"
,安装将成功。 You will probably see just the warning like 你可能会看到像这样的警告
because you use now "too good" version of npm
: the version 3.3.12 instead of some 2.xx
version (based on the rule "npm":"~2.0.0"
of the dependency package reactivex/rxjs
). 因为你现在使用
npm
“太好”版本:版本3.3.12而不是某些2.xx
版本(基于规则"npm":"~2.0.0"
reactivex/rxjs
"npm":"~2.0.0"
的依赖包reactivex/rxjs
)。
PS Probably you have some other error messaged if you use MVC5 instead of prerelease version of MVC6 (ASP.NET 5), but the main problem is the same. PS如果您使用MVC5而不是MVC6的预发布版本(ASP.NET 5),可能还有其他错误消息,但主要问题是相同的。 You have to install new version of node and npm and modify
C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm.cmd
to use the new version of npm. 您必须安装新版本的node和npm并修改
C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm.cmd
以使用新版本的npm。
I know that SO isn't keen on pasting links to stuff, but this is a fairly large tutorial to follow, to just copy paste into here... and all bits of it are relevant to answer the question. 我知道SO并不热衷于粘贴链接到东西,但这是一个相当大的教程,只需将粘贴复制到这里......并且它的所有部分都与回答问题相关。 Anyways, here's the tutorial provided by the Angular 2 team to get NG2 working in Visual Studio MVC 5:
无论如何,这是Angular 2团队提供的教程,让NG2在Visual Studio MVC 5中工作:
https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html
My answer is for MVC6 (didn't saw that MVC5 is needed) 我的答案是MVC6(没看到需要MVC5)
I recommend to use a starter template . 我建议使用入门模板 。 I can recommend a template which also uses HMR and Angular Universal (server side rendering for SEO and faster page loads):
我可以推荐一个模板,它也使用HMR和Angular Universal(服务器端渲染用于搜索引擎优化和更快的页面加载):
https://github.com/aspnet/JavaScriptServices https://github.com/aspnet/JavaScriptServices
Get started: http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/ 入门: http : //blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/
i got it working. 我搞定了。
npm install. npm安装。 from the node_modules folder, remove all folders except angular2 and systemjs.
从node_modules文件夹中,删除除angular2和systemjs之外的所有文件夹。 in the angular2 folder remove all except bundles.
在angular2文件夹中删除除bundle之外的所有内容。 in your bundles/typings folder remove all except angular2.
在您的bundles / typings文件夹中删除除angular2之外的所有内容。
folder structure looks like this: 文件夹结构如下所示:
node_modules
-- angular2
-- bundles
-- typings
--angular2
-- systemjs
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.