ASP.Net MVC角2 RC 1 [英] ASP.Net MVC Angular 2 RC 1
问题描述
有没有人尝试Angular2 RC 1与ASP.Net MVC？
Has anyone tried Angular2 RC 1 with ASP.Net MVC?
我无法与配置Angular2 RC1与ASP.Net 5，直到公测17一切都正常工作。
I am having trouble with configuring Angular2 RC1 with ASP.Net 5, till beta 17 everything was working fine.
下面配置中的的package.json似乎并不奏效：
The package.json with below configuration doesn't seems to be working:
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
},
恢复包显示输出窗口下面的输出：
Restoring packages displays the below output in output windows:
====Executing command 'npm install'====
npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data
npm http GET http://registry.npmjs.org/systemjs
npm http GET http://registry.npmjs.org/angular/compiler
npm http GET http://registry.npmjs.org/angular/core
npm http GET http://registry.npmjs.org/angular/http
npm http GET http://registry.npmjs.org/angular/platform-browser
npm http GET http://registry.npmjs.org/angular/platform-browser-dynamic
npm http GET http://registry.npmjs.org/angular/router
npm http GET http://registry.npmjs.org/angular/router-deprecated
npm http GET http://registry.npmjs.org/angular/common
npm http GET http://registry.npmjs.org/reflect-metadata
npm http GET http://registry.npmjs.org/angular/upgrade
npm http 304 http://registry.npmjs.org/systemjs
npm http 404 http://registry.npmjs.org/angular/platform-browser
npm http 404 http://registry.npmjs.org/angular/core
npm ERR! 404 Not Found
npm ERR! 404
npm ERR! 404 'angular/platform-browser' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.
npm ERR! System Windows_NT 6.2.9200
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"
npm ERR! cwd D:\User\MyProject-MVC6\src\MyProject
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.9
npm ERR! code E404
npm http 404 http://registry.npmjs.org/angular/http
npm http 404 http://registry.npmjs.org/angular/compiler
npm http 404 http://registry.npmjs.org/angular/router-deprecated
npm http 404 http://registry.npmjs.org/angular/router
npm http 404 http://registry.npmjs.org/angular/platform-browser-dynamic
npm http 304 http://registry.npmjs.org/reflect-metadata
npm http 404 http://registry.npmjs.org/angular/common
npm http 404 http://registry.npmjs.org/angular/upgrade
npm
====npm command completed with exit code 1====
分步说明使用Angular2 RC 1与ASP.Net MVC将是非常美联社preciated。
Step by step instructions to use Angular2 RC 1 with ASP.Net MVC would be highly appreciated.
推荐答案
有它固定的！分享细节，如果有人仍然在努力获得与ASP.Net MVC Angular2 RC1工作
Got it fixed! sharing the details if anyone still struggling to get Angular2 RC1 work with ASP.Net MVC
我要感谢巴里和白兰度在不同的点他们的指导。
Let me thank Barry and Brando for their guidance at different points.
我能够按照下面的步骤来解决上述错误：
I was able to fix the above errors by following the below steps:
的Visual Studio 2015年附带有一个很老的版本NPM的。因此，你需要做的第一件事是下载并 https://nodejs.org/en安装最新版本的节点/ （我安装了V6.1.0，目前的最新）。在此之后，你需要告诉Visual Studio中使用而不是嵌入旧版本的最新版本。对于这种按照以下步骤进行：
Visual Studio 2015 is shipped with a very old version of npm. Therefore the very first thing your need to do is download and install the latest version of Node from https://nodejs.org/en/ (I installed v6.1.0, current latest). After this you need to tell Visual Studio to use latest version instead of the embedded old version. For this follow the below steps:
在从顶部菜单中的Visual Studio去工具>选项
In Visual Studio from top menu go to Tools > Options
展开对话框中显示项目和解决方案节点
Expand Project and Solution node shown in dialog
选择外部Web工具
添加新条目指向C：\\ Program Files文件\\的NodeJS \\
（或者点到安装位置的NodeJS）
Add a new entry pointing to C:\Program Files\nodejs\ (or point to to location where you installed nodejs)
将其移动到列表的顶端。
Move it to the top of the list.
重新启动Visual Studio和恢复NPM包。
Restart Visual Studio and restore npm packages.
这应该固定在上面的错误，但是现在如果你尝试编译项目，你可能会看到很多的错误，主要是由于缺少类型定义，如：
This should fixed the above errors, but now if you try to compile the project, you might see alot of errors mainly due to the missing type definitions, such as:
Severity Code Description Project File Line Suppression State
Error TS6053 Build: File /node_modules/angular2/ts/typings/jasmine/jasmine.d.ts' not found
Invalid module name in augmentation, module '../../Observable' cannot be found. TypeScript Virtual Projects node_modules\rxjs\add\operator\zip.d.ts
Property 'map' does not exist on type 'Observable<Response>'.
要解决上面的错误，你需要做的就是增加您的main.ts或bootstrap.ts顶部的以下链接：
To fix above errors, all you need to do is just add the below link on top of your main.ts or bootstrap.ts:
///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
这应该可以解决上述的分型错误。
This should fix the above typings errors.
使用RC，角团队提供所有部件作为一个单独的文件。所以，在过去如果你现在能够包括角包作为索引文件打包文件angular2.dev.js（或分档），这不会工作。所需的组件需要包含在你的应用程序需要的索引。您可以使用systemjs.config.js包括添加依赖。我会强烈建议通过官方的快速入门指南特意去本节：
With RC, Angular team is offering all components as a separate files. So, in past if you were able to include the Angular package as a packaged file angular2.dev.js (or min file) in Index file, this wont work now. The required components needs to be included in index which your app needs. You can use systemjs.config.js to include add dependencies. I would highly recommend going through the official Quick Start guide specially this section:
https://angular.io/docs/ts/latest/quickstart.html#!#systemjs
即使后按照上述步骤正确的配置，当你运行你的应用程序，你可能会看到404，缺少棱角的文件。
Even after proper configuration by following the above steps, when you run your application, you might see 404, for missing angular files.
原因是，默认情况下ASP.Net 5会在/ wwwroot文件/ node_modules /文件夹的角度依赖关系。而且，由于node_modules是项目的根文件夹不是在wwwroot文件夹，浏览器返回404（找不到错误）。所以，从node_modules文件夹移动@angular文件夹的wwwroot应该解决这个问题。
The reason is, by default ASP.Net 5 looks for the Angular dependencies in /wwwroot/node_modules/ folder. And since node_modules is in project root folder not in wwwroot folder, the browser returns 404 (no found errors). So, moving the @angular folder from node_modules folder to wwwroot should fix the issue.
希望这有助于。
这篇关于ASP.Net MVC角2 RC 1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
