【问题标题】:ASP.Net MVC Angular 2 FinalASP.Net MVC Angular 2 最终版
【发布时间】:2016-09-01 18:37:17
【问题描述】:

有人用 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 的分步说明。

【问题讨论】:

  • 任何错误信息?
  • 我在恢复包时使用 npm 输出更新了问题。
  • 想知道为什么 npm 正在寻找 'angular/xxxx' 而不是 '@angular/xxxx'。我正在使用 Angular2 RC1 和 asp.net5 并且工作正常。希望我能提供更多帮助。我建议从命令行运行 npm install 而不是在 VS Studio 中运行
  • 白兰度感谢您的回复。我能够解决这个问题,实际上 VS 指向的是旧版本的 npm。我添加了一个包含更多细节的答案。但是现在我遇到了一些与缺少输入等有关的其他问题,请您检查我添加的答案并进一步指导。
  • @NaveedAhmed 下面是我解决输入错误问题的答案:stackoverflow.com/a/36948893/3532945

标签: asp.net-mvc angular asp.net-mvc-5 asp.net-core-mvc asp.net5


【解决方案1】:

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

根据您的 32/64 位 Windows 架构从下面的链接下载最新节点

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

【讨论】:

  • 感谢巴里的回复。我使用的 NPM 版本是 3.8.9 我也尝试将 Node 升级到版本 6.1.0(最新),但没有成功。
  • 我遇到了使用此步骤解决的相同错误,我确实卸载了以前的节点并从程序文件中删除了 nodejs 文件夹,然后重新启动计算机。
  • 您是否将它与 ASP.Net MVC 和 Angular 2 RC 1 一起使用?
  • 是的 asp.net 5,我升级到 rc1,但是在获取所有软件包后,当我在浏览器中加载时出现此错误错误:SyntaxError: Unexpected token
  • 巴里感谢您的回复。我能够解决这个问题,实际上 VS 指向的是旧版本的 npm,尽管我的机器上安装了最新版本。我添加了一个包含更多细节的答案。但是现在我遇到了一些与缺少输入等有关的其他问题,请您检查我添加的答案并进一步指导。
【解决方案2】:

解决了!如果有人仍在努力让 Angular 2 Final 与 ASP.Net MVC 一起工作,请分享详细信息

让我感谢BarryBrando 在不同方面的指导。

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

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

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

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

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

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

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

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

“可观察”类型上不存在属性“地图”。

要修复上述错误,您只需在 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,因为缺少 angular 文件。

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

地图错误

在某些情况下,升级 TypeScript 版本也会修复地图错误:

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

希望这会有所帮助。

【讨论】:

  • 在此处查看我的答案以消除打字问题:stackoverflow.com/a/36948893/3532945
  • 感谢白兰度的评论和指导。虽然我也能够通过遵循 Barry 的建议来消除打字错误,即通过导入 /// 在 main.ts 之上。但是现在我在浏览器中运行 Angular 文件时收到 404 错误。我不确定我需要在 wwwroot/lib 文件夹中复制哪些 Angular 文件
  • 我正在使用 rc5 并且仍然得到 map 的错误,尽管它确实运行(它在我升级 Node.js 之前运行)。我添加了类型参考路径,它对错误没有影响。但是,当我在可观察对象上使用“of”时,我得到一个错误,无论我使用什么版本的 Node.js,它都无法通过。很郁闷
  • 尝试升级到 TypeScript 2。在 Visual Studio 中单击工具 > 扩展和更新,然后从对话框左侧显示的列表中选择在线,然后搜索 TypeScript,从结果中安装 TypeScript 2.0 Beta for Microsoft Visual Studio 2015。重新启动计算机,希望它能修复所有地图错误。
【解决方案3】:

你必须添加

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

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

引用包含在

angular2-in-memory-web-api

【讨论】:

猜你喜欢
  • 2017-01-28
  • 2017-01-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-12-22
  • 2017-02-15
相关资源
最近更新 更多