package.json中Angular 2到4迁移的更改

Question

目前，该应用程序在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 }
}

Answer 1

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

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

Answer 2

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

Answer 3

这是一个很好的YouTube视频，解释了如何Migrate Angular 2 to Angular 4

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

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

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

3. 您可以获得对等问题，说明此版本与该版本不兼容。纠正错误说明你。请参阅视频如何更正同行问题。

4. 运行项目并进行全面测试。

Answer 4

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

几点：

• 我认为＆＃34;打字稿＆＃34;应该在＆＃34; devDependencies＆＃34;因为你在生产模式下不需要它。
• 我建议删除＆＃34; ^＆＃34;从你所有的依赖b.c.锁定确切的版本
会更好
• 我也强烈推荐使用＆＃34; shrinkwrap＆＃34;避免依赖项中的松散依赖项。

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

npm cache clean
npm install

供参考，请参阅“更新至4.0.0＆＃39;”部分。 http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

Answer 5

您无需手动更改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)
    }
}

Answer 6

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

这使我能够快速构建供应商库并快速测试它将全部加载而无需使用＆＃34; app工作！＆＃34; cli提供的项目。

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

还有一件事要看，如果你没有...纱线。 Yarn是我们Facebook朋友的新包装经理。它比较新，因此测试不如npm，但它有一些非常好的功能，至少在我的设置中，运行速度比npm快20倍。另一个提交者提到了收缩包裹，这是一个很好的工具，所以我想我会在该领域指出另一个解决方案。