ASP.Net MVC Angular 2 决赛

Question

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

我在使用 ASP.Net MVC 配置 Angular 2 RC 6 时遇到问题，直到 beta 17 一切正常。

具有以下配置的 package.json 似乎不起作用：

"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",

  },

恢复包在输出 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 的分步说明将不胜感激。

Answer 1

此问题的解决方案可以按照此处所述升级 Node 和 NPM 的版本（NPM/Node 版本存在问题 - 任何高于 node v5.10.1 和 npm v3.8.6+ 的版本似乎都可以） .

根据您的 32/64 位 windows 架构从下面的 link 下载最新节点

https://nodejs.org/en/blog/release/v5.10.1/://

Answer 2

修好了！如果有人仍在努力获得 Angular 2 与 ASP.Net MVC

的最终工作，请分享详细信息

让我感谢 Barry and Brando 他们在不同方面的指导。

我可以按照以下步骤修复上述错误：

Visual Studio 2015 附带一个非常旧的 npm 版本。因此，您需要做的第一件事就是从 https://nodejs.org/en/ 下载并安装最新版本的 Node（我安装的是 v6.1.0，当前最新版本）。

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

在 Visual Studio 中，从顶部菜单转到工具 > 选项
展开对话框中显示的项目和解决方案节点
Select 外部网络工具
添加指向 C:\Program 的新条目 Files\nodejs （或者到你安装nodejs的位置）
将其移至列表顶部。

重新启动 Visual Studio 并恢复 npm 包。

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

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

要修复上述错误，您只需在 main.ts 或 bootstrap.ts 之上添加以下 link:

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>

这应该可以解决上述输入错误。

对于 RC，Angular 团队将所有组件作为单独的文件提供。因此，在过去，如果您能够将 Angular 包作为打包文件 angular2.dev.js（或最小文件）包含在索引文件中，现在这将不起作用。所需的组件需要包含在您的应用程序所需的索引中。您可以使用 systemjs.config.js 来包含添加依赖项。我强烈建议阅读官方快速入门指南，特别是这一部分：

Link: https://angular.io/guide/quickstart

即使按照上述步骤正确配置后，当您运行您的应用程序时，您可能会看到 404，因为缺少 angular 个文件。

原因是，默认情况下 ASP.Net 5 在 /wwwroot/node_modules/ 文件夹中查找 Angular 依赖项。由于 node_modules 位于项目根文件夹中，而不是在 wwwroot 文件夹中，因此浏览器 returns 404（未发现错误）。因此，将 @angular 文件夹从 node_modules 文件夹移动到 wwwroot 应该可以解决问题。

地图错误

在某些情况下，升级 TypeScript 版本也会修复映射错误：

尝试按照以下步骤升级到 TypeScript 2： - 在 Visual Studio 中单击工具 > 扩展和更新 - Select 从对话框左侧显示的列表在线 - 搜索打字稿 - 从搜索结果中安装适用于 Microsoft Visual Studio 2015 的 TypeScript 2.0 Beta。 - 重启电脑，希望它能修复所有地图错误

希望对您有所帮助。

Answer 3

你必须添加

/// <reference path="../node_modules/angular2-in-memory-web-api/typings/browser.d.ts" />

在您的 main.ts 或 bootstrap.ts 之上，这将消除打字错误

参考文献包含在

angular2-in-memory-web-api

ASP.Net MVC Angular 2 决赛

ASP.Net MVC Angular 2 Final

asp.net-mvc

asp.net-mvc-5

asp.net-core-mvc

asp.net5

angular