Angular 9 update – In this article, you will learn about a required step that you need to follow to appropriately migrate your existing app to Angular 9 update – the latest version of the framework at the time of writing.
Angular 9 Update Released
Angular released with many features for the core framework and other libraries like angular material.
The new version depends on Typescript 3.6 and Node 12+.
Step to update angular 8 to angular 9
1: cloning the project from Github
2: Identifying the used angular version in the project
3: Identifying how to upgrade
4: Updating Angular 7 to angular V8
5: Updating Angular v8.2.3 to Angular 9
6: Serving the app
Why need to Upgrade?
Angular comes with the IVY render by default which provides increased performance and smaller bundles but also many features.
Updating your project to the latest version provides a bug fix and security issue. The Ivy compiler and runtime offers numerous advantages
- Smaller bundle sizes
- Faster testing
- Better debugging
- Improved build times, enabling AOT on by default
- Improved CSS class and style binding
- Better debugging
- Improved type checking
- Improved Internationalization
There are some changes you have to do
During the update
- For lazy loading modules via the router, make sure you are using dynamic import. Ng update should take automatically.
- In Angular 9 importing via string is removed.
- Make sure you are using Node10.13 or later.
- You can optionally pass the –create-commits(or –C) flag to ng update commands to create git commit per individual migration.
- Run ng update @angular/core @angular/cl, which should bring you to version 9 of angular.
- In angular 8 updates to TypeScript 3.7, for compiler check and error that might require to fix an issue in your code in the TypeScript 3.6 and 3.7.
- During the update to version 9, your project was transformed as necessary via code migration to remove any incompatible or deprecated API calls from your codebase.
- Bound CSS style and classes previously were applied with a “last change win” strategy but now follow or define precedence.
After an update
- If you are depending on the library you may consider speeding up your build by invoking cc(angular compatible compiler) in an npm post-install script via change package.json.
- If you use angular universal with @nguniversal/express-engine or @nguniversal/Hapi-engine several backup files will be created one of them for server.ts.
- This file is deferred from the default one, you need to annually change server.ts back to server.ts manually.
- Angular 9 introduced a global $localize() function that needs to be loaded if you depend on angular internationalization (i18n)
- Run ng add @angular/localize to add necessary package and code modifications.
To learn more about change consult the $localize global import migration.
- If you have specified any entry components in your ngmodules or had any use of ANALYZE_ENTRY_COMPONENTS, you can remove them. They are no longer required with IVY compiler and runtime.
- If you use TestBed.get, you should instead use TestBed.Inject. This new method has the same behavior but is type-safe.
- If you use angular i18n support, you will need to be using @angular/localize.
Why is this migration necessary?
Before Angular version 9, the Angular internationalization (i18n) system inlined translated msg into compiles output as a part of this template compilation. This approach required running the template compile once per target locate, often learning to slow production build time.
In a new i18n system, the angular compile tags the i18n message in the compiled code with a global $localize handler. The inline of a transaction then occurs as a post compilation step for each local because the application doesn’t need to be built again for each local, this makes the process much faster.
In a post- compilation inlining step to optional for example during development or if the translation will be inlined at runtime.
Therefore this global $localize must be available on the global scope at runtime.
To make $localize available on a global scope, each application must now import the @angular/localize/init module. This has the side-effect attaching minimal implementation of $localize to the global scope.
This schematic automatically adds the @angular/localize/init monitor for you. If your app uses angular’s i18n APIs.
More article –
