ASP.Net MVC Angular 2最终版 [英] ASP.Net MVC Angular 2 Final

查看：94
本文介绍了ASP.Net MVC Angular 2最终版的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有人用ASP.Net MVC尝试过Angular 2 RC Final吗?

Has anyone tried Angular 2 RC Final with ASP.Net MVC?

在使用ASP.Net MVC配置Angular 2 RC 6时遇到了麻烦，直到beta 17一切正常为止.

I am having trouble with configuring Angular 2 RC 6 with ASP.Net MVC, 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.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.1",

    "systemjs": "0.19.27",
    "core-js": "^2.4.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 6与ASP.Net MVC一起使用的说明.

Step by step instructions to use Angular2 RC 6 with ASP.Net MVC would be highly appreciated.

推荐答案

已解决问题！如果有人仍在努力使用ASP.Net MVC获得Angular 2 Final，则可以共享详细信息

Got it fixed! sharing the details if anyone still struggling to get Angular 2 Final work with ASP.Net MVC

让我感谢 Barry 和

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/下载并安装最新版本的Node. zh/(我安装了v6.1.0，当前最新).

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).

安装后，您需要告诉Visual Studio使用节点的最新版本，而不是嵌入式旧版本.为此，请执行以下步骤:

After installation, you need to tell Visual Studio to use latest version of node instead of the embedded old version. For this follow the below steps:

  1. 在Visual Studio中，从顶部菜单转到工具">选项"
  2. 展开对话框中显示的项目和解决方案"节点
  3. 选择外部Web工具
  4. 添加一个指向C:\ Program Files \ nodejs的新条目 (或到安装nodejs的位置)
  5. 将其移至列表顶部.
  1. In Visual Studio from top menu go to Tools > Options
  2. Expand Project and Solution node shown in dialog
  3. Select External Web Tools
  4. Add a new entry pointing to C:\Program Files\nodejs (or to the location where you installed nodejs)
  5. Move it to the top of the list.

  1. 重新启动Visual Studio并还原npm程序包.

这应该可以解决上述错误，但是现在，如果您尝试编译项目，则可能会看到很多错误，主要是由于缺少类型定义，例如:

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:

严重性代码描述项目文件行抑制状态
错误TS6053构建:找不到文件/node_modules/angular2/ts/typings/jasmine/jasmine.d.ts'

Severity Code Description Project File Line Suppression State
Error TS6053 Build: File /node_modules/angular2/ts/typings/jasmine/jasmine.d.ts' not found

扩充中无效的模块名称，找不到模块'../../Observable'.
TypeScript虚拟项目node_modules \ rxjs \ add \ operator \ zip.d.ts

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'.

要解决上述错误，您只需在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，Angular团队将所有组件作为单独的文件提供.因此，过去，如果您能够将Angular软件包作为打包文件angular2.dev.js(或min文件)包含在Index文件中，则现在将无法使用.需要的组件必须包含在您的应用所需的索引中.您可以使用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/guide/quickstart

即使按照上述步骤进行了正确的配置，运行应用程序时，也可能会看到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/文件夹中查找Angular依赖项.并且由于node_modules位于项目根文件夹中而不位于wwwroot文件夹中，因此浏览器返回404(未找到错误).因此，将@angular文件夹从node_modules文件夹移动到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.

地图错误

在某些情况下，升级TypeScript版本也可以修复地图错误:

In some cases upgrading TypeScript version also fixes the map errors:

请按照以下步骤尝试升级到TypeScript 2: -在Visual Studio中，单击工具">扩展和更新" -从对话框左侧显示的列表中选择在线" -搜索TypeScript -从搜索结果中安装Microsoft Visual Studio 2015的TypeScript 2.0 Beta. -重新启动计算机，并希望它将解决所有地图错误

Try upgrading to TypeScript 2 by following below steps: - In Visual Studio click Tools > Extensions and Updates - Select Online from the list shown on left of the dialog - Search for TypeScript - From search results install TypeScript 2.0 Beta for Microsoft Visual Studio 2015. - Restart computer and hopefully it will fix all map errors

希望这会有所帮助.

这篇关于ASP.Net MVC Angular 2最终版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆