5

目前，该应用程序在 Angular 2.0.0 上。为了与 Angular 4 兼容，需要更改哪些包或依赖项？到目前为止，我已经更改了以下内容，

"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/router": "4.0.0",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "4.0.0",
"angular2-toaster": "2.0.0",
"rxjs": "^5.0.1",
"typescript": "^2.1.5",
"zone.js": "^0.8.4"
}

是否还有其他需要更改的包/依赖项？

我应该对 tsconfig.json 进行更改吗？

{


 "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "es5",
      "es2015",
      "es2017",
      "dom",
      "scripthost"
    ],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noEmitHelpers": true,
    "allowNonTsExtensions" : true
  },
  "exclude": [
    "node_modules",
    "typings/main.d.ts",
    "typings/main"
  ],
  "filesGlob": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "!./node_modules/**/*.ts",
    "src/custom_typings.d.ts",
    "typings/browser.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "resolveGlobs": true,
    "forkChecker": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}
4

6 回答 6

1

我通常使用此处的文件作为指导：https ://github.com/angular/quickstart

它提供了应用程序所需的一组基本种子文件，并且通常与 Angular 保持同步，因为它是 angular.io 上 Angular 文档的一部分。

于 2017-03-28T22:02:44.433 回答
1

有一个在线应用程序可以指导您将 2 升级到 4 的（简单）过程：https ://angular-update-guide.firebaseapp.com/

于 2017-04-03T10:45:58.893 回答
1

这是一个很好的 youtube 视频，它解释了如何将 Angular 2 迁移到 Angular 4

让我总结一下视频中所说的内容。从 Angular 2 迁移到 Angular 4 是一个三步过程。

  1. 删除旧的“node_modules”文件夹，因为它引用了 Angular 2.X。

  2. 将所有@Angular 版本从 2.X 更改为 4.X 并执行“npm install”。

  3. 您可能会遇到对等问题，指出此版本与该版本不兼容。更正它错误状态。观看视频如何纠正对等问题。

  4. 运行项目并进行彻底的测试。

在此处输入图像描述

于 2017-05-20T02:01:05.970 回答
0

您无需手动更改 package.json 文件，如果您使用的是 windows，则可以运行此命令

npm cache clean

npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

这将有助于

发表评论后

您应该更新您的打字稿，也可以尝试在 tsconfig.json 中更改它

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
    }
}
于 2017-03-29T08:50:59.250 回答
0

在这些情况下，我的解决方案是使用 angular-cli 以我想要的 angular 版本创建一个新项目（对我来说几乎总是最新版本），然后添加我需要的其他依赖项，让包管理器整理出什么我应该拥有的版本，或者通过我的包管理器命令选项断言我对此的看法。

这使我能够快速构建供应商库并使用“应用程序正常工作！”快速测试它是否将全部加载而不会出错！cli提供的项目。

完成此过程后，您应该有一个 package.json 文件，您可以将依赖项部分剪切并粘贴到您的项目中。

如果你还没有的话，还有一件事要看看……纱线。Yarn 是来自我们 facebook 朋友的新包管理器。它比 npm 更新，因此测试较少，但它有一些非常好的功能，并且至少在我的设置中，它的运行速度比 npm 快约 20 倍。另一位评论者提到了收缩包装，这是一个很棒的工具，所以我想我会指出该领域的另一种解决方案。

于 2017-03-29T15:54:26.527 回答
0

您不需要对 ts.config 进行更改。您在 package.json 中所做的更改似乎是正确的。

几点：

  • 我认为“typescript”应该在“devDependencies”中，因为您在 prod 模式下不需要它。
  • 我建议从所有依赖项中删除“^”，因为最好锁定确切的版本
  • 我还强烈建议使用“shrinkwrap”来避免依赖项中的松散依赖项。

要安装 Angular 最新版本，请删除/移动您当前的 node_modules 文件夹。然后：

npm cache clean
npm install

如需参考，请参阅“更新到 4.0.0”部分 http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

于 2017-03-28T20:41:50.223 回答