Effortlessly Update Your Angular-cli Projects
Disclaimer: This guide is scoped in low to medium complexity of the project. If you have bigger project, use from the official guide instead!
If your frameworks gets some new updates ( eg: improvements, new features, etc. ) is kind of blessing, but updating it with your current project is kind of distressing because you should keeping an eye for your libraries and your 3rd party dependencies. Doing things like version upgrading makes your project faster because of performance updates and improvements from the creator itself(not every updates), but if you don’t, your projects gonna left behind or the worst case, no longer supported.
Before we start, make sure your machines matched with the required versions such as:
- Node JS: 10.x.x
- NPM : 6.x.x
- Angular@cli : 8.x.x (Globally Installed)
In this guide, I’m using a project with angular@cli: 1.7.4 locally installed, and going to update it to version 8.x.x.
First thing first, let’s recheck our current project by typing:
ng v
Then, reinstall your specific version of angular cli to update. In this case, we’re going to update it into version 8. Then, simply run:
npm i @angular/cli@8If you check your version again, your terminal will show the latest version of angular CLI installed on your machine, but not the angular/core. It’s still on version 5.
So what’s next? Let’s run:
ng update @angular/cliBut, why did we update it again? Is it already installed the latest version? Yes, it is. We’re doing this because some specific files need to be updated safely such as angular-cli.json into angular.json. We’re gonna let the CLI do the magic itself.
Disclaimer: At this part, update will use some Git interactions such as clean repository which requires us to do some updates. Use your specific branch or create a new branch to do this updating activity.
Great, we’re done with CLI stuff. Let’s move on to its core, and other stuff. But first, let’s check what packages we should update regarding to the CLI output by running:
ng updateIn this case, we got 5 packages that need to be updated.
Let’s update the core by simply run:
ng update @angular/core@8 --forceWhy use force? Yes, because we’re Jedi! Lol no. That’s because the rest of dependencies are not compatible with the core that we’re gonna update. That’s okay, we’re doing fine.
After doing the core update, your terminal will log the migrations and doing some file changes regarding to the updates.
Then, update the rest of the packages that need to be updated.
ng update {{SPECIFIC_PACKAGES}}After we’re done, let’s check our current version.
Okay let’s get some shot by running:
ng serveWe should get some errors regarding to the migrations and updates such as:
This error happens because DOCUMENT is no longer in @angular/platform-browser, you should import from @angular/common instead.
// no longer supported syntax
import { DOCUMENT } from '@angular/platform-browser'// use from this package instead
import { DOCUMENT } from '@angular/common'
After we have fixed the error, let’s try running it again:
Great, let’s try build the app!
ng build --prod
Hoooray!, we have successfully migrated our old Angular apps to the latest version! 🎉🎉🎉
Conclusion
Although angular has released some documents that guide us to update your CLI officially, we can update it with less efforts with some tricks described above. If you want to do it to your current project, migrate it wisely! Check your project if that’s too big or complicated, use the guide from the official site instead for safer migration.
