--- title: "Angular 9 : Update and new feature" description: "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..." url: https://blog.codedthemes.com/angular-9-update/ date: 2020-02-12 modified: 2024-10-11 author: "Ankita Nathani" image: https://blog.codedthemes.com/wp-content/uploads/2020/02/wordpress-hosting-Recovered.png categories: ["Trends"] tags: ["angular", "angular 9", "angular 9 update", "update 9"] type: post lang: en --- # Angular 9 : Update and new feature 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** (https://angular.io/) 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 –** - (https://blog.codedthemes.com/react-js-vs-angular-js-vs-vue-js/) - (https://blog.codedthemes.com/best-open-source-angular-chart-libraries/) Share this:[](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fangular-9-update%2F&linkname=Angular%209%20%3A%20Update%20and%20new%20feature)[](https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fangular-9-update%2F&linkname=Angular%209%20%3A%20Update%20and%20new%20feature)[](https://www.addtoany.com/add_to/reddit?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fangular-9-update%2F&linkname=Angular%209%20%3A%20Update%20and%20new%20feature)[](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fangular-9-update%2F&linkname=Angular%209%20%3A%20Update%20and%20new%20feature)[](https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fangular-9-update%2F&linkname=Angular%209%20%3A%20Update%20and%20new%20feature)