ASP.Net MVC Angular 2 Final

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

  },

恢复包在输出窗口中显示以下输出:

====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

修好了!如果有人仍在努力让Angular 2 Final与ASP.Net MVC合作,那就分享细节

让我感谢巴里和白兰度在不同方面提供的指导.

我可以通过以下步骤修复上述错误:

Visual Studio 2015 附带了一个非常旧版本的npm.因此,您需要做的第一件事是从https://nodejs.org/en/下载并安装最新版本的Node (我安装了v6.1.0,最新版本).

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

1. 在顶部菜单的Visual Studio中,转到"工具">"选项"
2. 展开对话框中显示的Project和Solution节点
3. 选择外部Web工具
4. 添加指向C:\ Program Files \nodejs的新条目(或指向您安装nodejs的位置)
5. 将其移至列表顶部.

6. 重新启动Visual Studio并还原npm包.

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

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

增强中的模块名称无效,无法找到模块"../../Observable".
TypeScript虚拟项目node_modules\rxjs\add\operator\zip.d.ts

"Observable"类型中不存在属性"map".

要修复上述错误,您只需在main.ts或bootstrap.ts上添加以下链接即可:

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

这应该解决上面的打字错误.

通过RC,Angular团队将所有组件作为单独的文件提供.因此,在过去,如果您能够将Angular包作为打包文件angular2.dev.js(或min文件)包含在索引文件中,那么现在就无法使用.所需的组件需要包含在您的应用程序所需的索引中.您可以使用systemjs.config.js来包含添加依赖项.我强烈建议您阅读官方快速入门指南,特别是本节:

链接:https://angular.io/guide/quickstart

即使在按照上述步骤进行适当配置后,当您运行应用程序时,您可能会看到404,因为缺少角度文件.

原因是,ASP.Net 5默认在/ wwwroot/node_modules /文件夹中查找Angular依赖项.由于node_modules位于不在wwwroot文件夹中的项目根文件夹中,因此浏览器返回404(未找到错误).因此,将@angular文件夹从node_modules文件夹移动到wwwroot应该可以解决问题.

映射错误

在某些情况下,升级TypeScript版本还会修复映射错误:

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

希望这可以帮助.