将“Angular2 Mvc5 示例应用程序”更新到最新版本的 Angular2答案

【问题标题】：Update "Angular2 Mvc5 sample application" to latest version of Angular2将“Angular2 Mvc5 示例应用程序”更新到最新版本的 Angular2
【发布时间】：2017-03-14 08:09:21
【问题描述】：

我想使用 ASP.NET MVC5 和 Angular2 来制作应用程序。为此，我使用了 Visual Studio 中可用的现成模板，名为 "Angular2 Mvc5 sample application"。模板附带的 package.json 表明它正在使用 rc-1 以及 Angular 2 和 Typescript 的相关依赖项。由于现在 Angular 2 的最新版本是 2.4.0，我想在我的项目中使用最新版本的 angular2。我怎样才能做到这一点？我尝试更新 package.json 文件并将版本更改为最新版本

    {
      "name": "aspnet",
      "version": "0.0.0",
      "scripts": {
        "postinstall": "typings install",
        "typings": "typings"
      },
      "license": "ISC",
      "devDependencies": {
        "typings": "0.8.1" 
      },
      "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",
        "core-js": "^2.4.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "zone.js": "^0.6.12",

        "angular2-in-memory-web-api": "0.0.9"
      }
    }

我从 angular cli 项目中获取了一个参考来更新包，更新后我的 package.json 看起来像

{
  "name": "aspnet",
  "version": "0.0.0",
  "scripts": {
    "postinstall": "typings install",
    "typings": "typings"
  },
  "license": "ISC",
  "devDependencies": {
    "typings": "~2.0.0"
  },
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",

    "systemjs": "0.19.27",
    "reflect-metadata": "^0.1.3",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6",

    "angular2-in-memory-web-api": "0.0.9"
  }
}

更新 package.json 后 > 我恢复了包，但在构建项目后出现了很多错误

这些图片可以帮助您了解错误

【问题讨论】：

你能显示错误吗？
转到 Visual Studio，帮助，关于...您使用的是什么版本的 TypeScript？我怀疑它已经过时了。
@pixelbits 其 1.8.36.0
您的项目中是否包含node_modules？它应该被排除在外。
@pixelbits 是的，它被排除在外。但为什么会这样呢？

标签： angular asp.net-mvc-5

【解决方案1】：

要将您的 Angular 升级到最新版本，请从 package.json 选择所需的软件包并将其更新为您的 package.json。要修复错误，您需要更新nodejs 和npm 的版本。安装更新 nodejs 和 npm 后，还必须在 Visual Studio 中添加 nodejs 路径才能使用最新版本的 nodejs 和 npm。要在 VS 中添加路径，请转到工具 > 选项 > 项目和解决方案 > 外部 Web 工具。为此，您可以关注此guide。

【讨论】：

那很好，如果您在使用 Angular2 开发时遇到任何困难，您可以随时询问。