在现有项目中更新 Angular CLI。

Question

我正在现有项目中使用 angular-cli 1.0.4，我想将版本更新到 1.2.4。如何使用 npm 卸载旧版本并更新到新版本，而不影响我的现有项目？这将在 package.json 文件中更新版本。

- Aakash N

---

更新Angular CLI。 - R. Richards

@r-richards，您提供的链接并不是问题的答案，因为它没有说明如何升级从1.0.4到1.2.4所发生的破坏性变化，而只是说明如何在项目中重新安装/更新@angular/cli npm包。 - angularrocks.com

Answer 1

注意：2023年2月22日，最近发布了一个名为NGVM的绝佳工具。
它可能非常有用来维护Angular CLI版本。

更新您的angular cli到任意版本的指南

更新于2018年10月23日，参考：如何在ng cli和angular更改版本时更新应用程序的最佳实践：

如果您使用的是Angular CLI 6+版本，请运行ng update，然后按照命令行提示操作。同时，查看此指南：更新您的Angular项目

---

最近我正在将我的项目从1.0.4升级到1.3.0-beta，但无论是哪个angular cli版本都适用。

所以首先按照https://github.com/angular/angular-cli#updating-angular-cli所说安装您想要升级项目的angular cli版本：

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@<put exact version here>

升级步骤：

1. 创建一个新的空白项目，名称为 ng new project-name。你可以将新项目命名为与旧项目相同的“playground”项目，但确保它位于不同的文件夹中。

2. 从旧项目中复制/替换 app 文件夹到你刚刚创建的新项目中。

3. 将所有自定义更改应用到项目的其余所有文件中：
   3a. 将旧项目中的所有与项目相关的npm包放入 package.json 中（使用比较工具）；你的旧和新的package.json之间的区别只会是@angular/cli@version及其相关软件包版本，如karma等。
   3b. 使用比较工具(请参阅下面的更新)，确保将所有cli相关文件中的自定义内容带入，如 .angular-cli.json、.gitignore、index.html、src/polyfills.ts、src/main.ts、src/test.ts 等。

4. 运行 npm install 或 yarn。

5. 测试所有 npm 脚本：
   5a - 运行 ng serve 确保它可以工作，如果不能，请修复错误；
   5b - 运行 ng build 确保它可以工作，如果不能，请修复错误；
   5c - 运行 ng lint 确保它可以工作，如果不能，请修复错误；
   5d - 运行 ng test 确保它可以工作，如果不能，请修复错误（在这个步骤中我发现了一个错误）；
   5e - 测试你的应用程序所依赖的所有其他npm脚本。

一旦你完成了上述所有步骤，你可以删除或归档旧项目以备不时之需，并从那一点开始使用新项目。

更新：你还可以使用angular-cli-diff查找版本间的差异，例如https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0（请参见“文件更改”选项卡）。

因此，使用angular-cli-diff，你可以：

1. 比较CLI版本，例如：https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0
2. 点击 File changed 选项卡
3. 将更改应用到您当前的项目中。
4. npm install / yarn
5. 按照上述步骤 5(a-e) 测试更改

- angularrocks.com

Answer 2

请查看 Angular-Cli 文档。您无需创建新项目。

全局包：

npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force)
npm install -g @angular/cli@latest

本地项目包：

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

- Matteo Tosato

---

点赞如果包含Windows命令：rmdir /S/Q node_modules dist - Chris22

Answer 3

更新 AngularCLI v.1.x.x 的小版本

注意：如果您正在从 beta 或 RC 版本升级到 1.0，请查看1.0 更新指南。

AngularCLI 不支持自动更新 CLI 版本和现有项目的依赖项。然而，保持最新版本可能会非常有益，因为您可以获得最新功能、性能改进和错误修复。

我成功地通过以下步骤将我的项目从 v.1.1.0 升级到 v1.3.0：

1. 更新全局 AngularCLI 版本（请参考 this guide）

2. 使用最近安装的最新版本创建一个“升级项目”

   $: ng new upgrade-project --skip-install
   

   这将在新文件夹中创建项目并提交初始文件。

3. 使用 Git 创建和应用升级补丁

   您可以使用普通的 git format-patch / apply 或者您喜欢的 IDE（如 WebStorm）来完成

   $: git format-patch -1 HEAD --stdout > cli-upgrade.patch
   $: git apply cli-upgrade.patch
   

4. 仔细查看更改并验证哪些是真正需要的

   注意：您需要正确地合并修改后的文件

5. 重新安装已更新的依赖项

   • 在重新安装之前清除旧的依赖项[推荐]

     $: rm -rf node_modules
     

   • 安装依赖项

     $: npm install
     

6. 现在您的更新已经完成，下一步是验证所有内容是否按预期工作，并修复可能在过程中出现的小问题

在 CLI 成功更新以及其初始依赖项之后，您可以随意更新其他未默认安装的附加依赖项（例如 Angular Material）。

$: npm update @angular/material ...

- S.Klechkovski

Answer 4

以上两个答案都是正确的，基于同样的方法，这也是目前事实上的方式。

Angular CLI 有计划在即将发布的版本中添加更新功能。

要更新您的其他依赖项，可以通过将它们移动到第二个 package.json 中来实现优雅的方式。您可以使用 Yarn Workspaces 或 package-json-merge 来完成。更多信息请访问我的网站：https://www.rainerhahnekamp.com/en/updating-angular-cli-dependencies/

- rainerhahnekamp