[英]Update Angular CLI in existing project
I'm working on angular-cli 1.0.4 in existing project, I would like to update the version to 1.2.4. 我正在现有项目中使用angular-cli 1.0.4,我想将版本更新为1.2.4。 What is the best way to uninstall the old one and update to the newer one using npm with effecting my existing project?
卸载旧版本并使用npm更新到较新版本并影响我现有项目的最佳方法是什么? which updates the version on package.json file.
它会更新package.json文件的版本。
your angular cli
to any
version your angular cli
更新为any
版本的指南 UPDATE 23-Oct-2018 ref: how to update an app when ng cli and angular change version best practice : 更新2018年10月23日参考: 如何在ng cli和角度变化版本最佳实践时更新应用程序 :
If you are on Angular CLI version 6+ just run
ng update
then follow the command line instructions.如果您使用Angular CLI版本6+,只需运行
ng update
然后按照命令行说明进行操作。 Also checkout this guide Updating your Angular projects另请查看本指南更新Angular项目
Recently I've being upgrading my project from 1.0.4
to 1.3.0-beta
, but the same will apply in case of any angular cli versions. 最近我将我的项目从
1.0.4
升级到1.3.0-beta
,但是在任何角度cli版本的情况下都适用。
So first just install angular cli you want to upgrade your project to as https://github.com/angular/angular-cli#updating-angular-cli is saying: 所以首先只需要安装你想要升级项目的角度cli,如https://github.com/angular/angular-cli#updating-angular-cli所说:
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@<put exact version here>
new blank
project like ng new project-name
you can name your new "playground" project
exactly like your old project
, but make sure that it sits in the different folder from your current one. new blank
项目,例如ng new project-name
您可以将new "playground" project
命名为与old project
完全相同,但请确保它与当前old project
位于不同的文件夹中。 Copy/replace your app
folder form your old project
to new project
you just created 将
old project
app
文件夹复制/替换为刚刚创建的new project
Bring all custom changes to all the rest files in a project: 将所有自定义更改带到项目中的所有其余文件:
3a. 3A。 Put all your project related npm packages from your old project in to
package.json
(use compare tool) the difference between your old and new package.json
is gonna be just @anngular/cli@version
and its related packages versions like karma
, etc 将旧项目中与项目相关的所有npm软件包放入
package.json
(使用比较工具) ,新旧package.json
之间的区别只是@anngular/cli@version
及其相关软件包版本,如karma
等
3b. 3B。 Using compare tool( see UPDATE below for that matter ) make sure that you bring all your custom stuff form all cli related files like
.angular-cli.json
, .gitignore
, index.html
, src/polyfills.ts
, src/main.ts
, src/test.ts
, etc 使用比较工具( 请参阅下面的UPDATE )确保将所有自定义内容
.angular-cli.json
所有cli相关文件中,如.angular-cli.json
, .gitignore
, index.html
, src/polyfills.ts
, src/main.ts
, src/test.ts
等
Run npm install
or yarn
运行
npm install
或yarn
npm scripts
: npm scripts
: ng serve
to make sure it is works, if not fix the errors ng serve
以确保它有效,如果不能修复错误 ng build
to make sure it is works, if not fix the errors ng build
以确保它正常工作,如果不能修复错误 ng lint
to make sure it is works, if not fix the errors ng lint
以确保它正常工作,如果没有修复错误 ng test
to make sure it is works, if not fix the errors ( here is an error I've being caught during that step) ng test
以确保它正常工作,如果没有修复错误( 这是我在该步骤中被捕获的错误 ) npm scripts
that your app is relying on. npm scripts
。 Once you done with all above you can remove or archive the old project
just in case and keep going with a new project
from that point. 完成上述所有操作后,您可以删除或归档
old project
以防万一,从那时起继续使用new project
。
UPDATE : you also can use this angular-cli-diff to find out what is the difference between the versions eg https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0 (see the
Files changed
tab)更新 :你也可以使用这个angular-cli-diff来找出版本之间的区别,例如https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0 (参见
Files changed
选项卡)
So with angular-cli-diff you do: 所以使用angular-cli-diff你可以:
File changed
tab File changed
选项卡 npm install / yarn
5(ae)
as above 5(ae)
的变化 Look at the Angular-Cli docs . 看看Angular-Cli 文档 。 You don't need to create a new project.
您不需要创建新项目。
Global package: 全球套餐:
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
Local project package: 本地项目包:
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
NOTE: If you are updating to 1.0 from a beta or RC version, check out the 1.0 Update Guide .
注意:如果要从测试版或RC版更新到1.0,请查看1.0更新指南 。
AngularCLI doesn't have support for automatic update of the CLI version and the dependencies on existing projects. AngularCLI不支持自动更新CLI版本和现有项目的依赖项。 However, keeping up to the latest version can be quite beneficial as you get the latest features, performance improvements and bug fixes.
但是,在获得最新功能,性能改进和错误修复时,保持最新版本非常有用。
I managed to successfully update my project from v.1.1.0 to v1.3.0 with the following steps: 我设法通过以下步骤将我的项目从v.1.1.0成功更新到v1.3.0:
Create an 'upgrade-project' with the latest version that you recently installed 使用您最近安装的最新版本创建“升级项目”
$: ng new upgrade-project --skip-install
This will create the project in new folder and commit the initial files. 这将在新文件夹中创建项目并提交初始文件。
Create and apply an upgrade patch with Git 使用Git创建并应用升级补丁
You can use plain git format-patch / apply or the support of your favorite IDE (ex. WebStorm) 你可以使用普通的git format-patch / apply或你最喜欢的IDE的支持(例如WebStorm)
$: git format-patch -1 HEAD --stdout > cli-upgrade.patch $: git apply cli-upgrade.patch
Carefully go through the changes and verify which of them are really needed 仔细检查更改并验证确实需要哪些更改
NOTE: you will need to merge the modified files correctly 注意:您需要正确合并已修改的文件
Re-install the updated dependencies 重新安装更新的依赖项
clear the old dependencies before the re-install [recommended] 在重新安装之前清除旧的依赖项[推荐]
$: rm -rf node_modules
install the dependencies 安装依赖项
$: npm install
Now your update is complete, the next step is to verify that everything is working as expected and fix small things that might got broken along the way 现在您的更新已完成,下一步是验证一切是否按预期工作并修复可能在此过程中被破坏的小事
After the CLI was successfully updated together with it's initial dependencies feel free to update also your additional dependencies which are not installed by default (ex. Angular Material). 在CLI成功更新后,它的初始依赖关系随时也可以更新默认情况下未安装的其他依赖项(例如Angular Material)。
$: npm update @angular/material ...
Both answers above are correct and are based on the same approach that is the de-facto way as of today. 上述两个答案都是正确的,并且基于与今天事实上相同的方法。
There are plans from Angular CLI to add an update feature in one of the coming releases. Angular CLI计划在其中一个版本中添加更新功能。
To update your additional dependencies there is an elegant way by moving them to a second package.json. 要更新您的其他依赖项,可以通过将它们移动到第二个package.json来实现。 You can use Yarn Workspaces or package-json-merge for that.
您可以使用Yarn Workspaces或package-json-merge。 More info on my website: https://www.rainerhahnekamp.com/en/updating-angular-cli-dependencies/
我的网站上有更多信息: https : //www.rainerhahnekamp.com/en/updating-angular-cli-dependencies/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.