Skip to content

Instantly share code, notes, and snippets.

@karantakalkar

karantakalkar/Angular9.md

Created August 19, 2020 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save karantakalkar/7a9d564de7dbfe6b45a10ddddb86ae48 to your computer and use it in GitHub Desktop.
Save karantakalkar/7a9d564de7dbfe6b45a10ddddb86ae48 to your computer and use it in GitHub Desktop.
Download ZIP
ng-update-v9
Raw
Angular9.md

Update MifosX Web App to Angular 9

This documents all decisions made while updating the MifosX Web App from Angular 8 to Angular 9 following the official Angular update guide.

Before Update

✔️ Anywhere you use Renderer, now use Renderer2

  • Only Renderer2 is being used in the app

✔️ Instead of importing from @angular/material, you should import deeply from the specific component. E.g. @angular/material/button. ng update will do this automatically for you.

✔️ For lazy loaded modules via the router, make sure you are using dynamic imports. Importing via string is removed in v9. ng update should take care of this automatically.

✔️ We are deprecating support for @angular/platform-webworker, as it has been incompatible with the CLI. Running Angular's rendering architecture in a web worker did not meet developer needs. You can still use web workers with Angular.

  • No instance of web-workers found.

✔️ Support for web tracing framework in Angular was deprecated in version 8. You should stop using any of the wtf* APIs.

  • App doesn't use wtf* APIs

✔️ Remove any es5BrowserSupport flags in your angular.json and set your target to es2015 in your tsconfig.json. Angular now uses your browserslist to determine if an ES5 build is needed. ng update will migrate you automatically.

  • No es5BrowserSupport flag found. Target set to es5 in tsconfig.json to disable differential loading.

During the Update

✔️ Make sure you are using Node 10.13 or later. Run ng update @angular/core@8 @angular/cli@8 in your workspace directory to update to the latest 8.x version of @angular/core and @angular/cli and commit these changes.

  • App uses Node 12.x environment and PR is already on latest version of Angular 8

✔️ You can optionally pass the --create-commits (or -C) flag to ng update commands to create a git commit per individual migration.

✔️ Run ng update @angular/core@9 @angular/cli@9 which should bring you to version 9 of Angular.

  • Initial Compilation had the following error log, these were resolved after subsequent changes. Screenshot from 2020-08-18 17-27-04

⁉️ Your project has now been updated to TypeScript 3.8, read more about new compiler checks and errors that might require you to fix issues in your code in the TypeScript 3.7 or TypeScript 3.8 announcements.

  • In code optional chaining could help improve logic in .ts files. Need to check the app for any code breakage, although the app compiles.

✔️ Run ng update @angular/material@9.

  • Need to run similar command as in Angular 8 upgrade (ng update @angular/material@9 @angular/cdk@9 @angular/flex-layout@9.0.0-beta.31).
  • This resolves flex layout bug after initial compilation.
  • There were some e2e warnings, which are not relevant as we havent initialized testing yet. Screenshot from 2020-08-18 17-47-23
  • hammerjs import in main.ts has been removed and hammer module has been added to app.module.ts for gesture support see this thread.

✔️ If you use Angular Universal, run ng update @nguniversal/hapi-engine or ng update @nguniversal/express-engine depending on the engine you use. This step may require the --force flag if any of your third-party dependencies have not updated the Angular version of their peer dependencies.

  • We dont use Angular Universal.

⁉️ If your project depends on other Angular libraries, we recommend that you consider updating to their latest version. In some cases this update might be required in order to resolve API incompatibilities. Consult ng update or npm outdated to learn about your outdated libraries.

  • Angular Fontawesome broke as expected, updated it to v0.6.1 as in compatibility guide, Since we were using v0.3.0 a change in API usage [1] had been introduced in v0.5.0 which caused code breakage, Screenshot from 2020-08-18 17-55-04
  • Resolved by modifying icon.module.ts in shared module
  • Other dependencies chart.js and ckEditor5 are working fine in development build, need to test for production build.

✔️ During the update to version 9, your project was transformed as necessary via code migrations in order to remove any incompatible or deprecated API calls from your code base. You can now review these changes, and consult the Updating to version 9 guide to learn more about the changes.

  • See last point.

⁉️ Bound CSS styles and classes previously were applied with a "last change wins" strategy, but now follow a defined precedence. Learn more about Styling Precedence.

  • Need to check the project for styling malfunctionality.

✔️ If you are a library author and you had a method returning ModuleWithProviders (typically via a method named forRoot()), you will need to specify the generic type. Learn more angular.io

  • See last point.

⁉️ If you use ngForm element selector to create Angular Forms, you should instead use ng-form.

  • Yes we use ngForm [1] selector at certain places, It didn't break the functionality here, however when I replaced all instances with ng-form, app failed to compile.

✔️ We have updated the tsconfig.app.json to limit the files compiled. If you rely on other files being included in the compilation, such as a typings.d.ts file, you need to manually add it to the compilation.

  • Yes we rely on typings.d.ts file, it contains declarations for ckEditor5 as well as chart.js.
  • Updated tsconfig.app.json as well as tsconfig.json to include typings.d.ts [1]
  • This resolves cannot find module... bugs after initial compilation.
  • For some unknown reason i18n errors also disappeared after this change.

✔️ 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. If this file defers from the default one, you may need to copy some changes from the server.ts.bak to server.ts manually.

  • We dont use Angular Universal.

After Update

✔️ With Angular 9 Ivy is now the default rendering engine, for any compatibility problems that might arise, read the Ivy compatibility guide.

  • Haven't faced any issue in building or compiling the app as of now though there was this warning everytime I ran ng serve: Screenshot from 2020-08-18 19-39-55
  • Currently I have just silenced the warning by adding a ngcc.config.js file [1], There is no runtime issue with ckEditor however need to check if it works in production build.
  • Reason for such warnings can be found in this thread.

✔️ If you depend on many Angular libraries you may consider speeding up your build by invoking the ngcc (Angular Compatibility Compiler) in an npm postinstall script via small change to your package.json.

  • Added postinstall script in package.json.[file]

✔️ Angular 9 introduced a global $localize() function that needs to be loaded if you depend on Angular's internationalization (i18n). Run ng add @angular/localize to add the necessary packages and code modifications. Consult the $localize Global Import Migration guide to learn more about the changes.

  • Ran ng add @angular/localize added @angular/localize-v9 in package.json.
  • App didn't break before this nor did this help in resolving errors, but updated as we use i18n.

✔️ If you have specified any entryComponents in your NgModules or had any uses of ANALYZE_FOR_ENTRY_COMPONENTS, you can remove them. They are no longer required with the Ivy compiler and runtime.

  • Removed entryComponents from all modules wherever present, entryComponents are now deprecated. Although they don't break functionality if present.

✔️ If you use TestBed.get, you should instead use TestBed.inject. This new method has the same behavior, but is type safe.

  • Replaced all instances of TestBed.get with TestBed.inject, this silenced ng lint warnings as well.

✔️ If you use Angular's i18n support, you will need to begin using @angular/localize. Learn more about the $localize Global Import Migration.

  • Yes we use i18n particularly to translate page titles.
  • Added localize import in polyfills.ts. [file].
  • We can have runtime translations if we use i18n.

✔️ In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported. Read more. ng update will migrate you automatically.

  • See last point.

✔️ As of Angular 9, enforcement of @Injectable decorators for DI is stricter and incomplete provider definitions behave differently. Read more. ng update will migrate you automatically.

  • The following is migrations log, I have checked all listed features.

Screenshot from 2020-08-18 16-59-26

Other Details

Type Checking

  • Angular 9 has new template checking features coming along with Ivy, this can help us spot errors at compile time rather than at build time. [Details]
  • Currently I have configured the least strict option ie: similar to Angular 7/8 doesn't type check the template.
  • Setting "fullTemplateTypeCheck" option to true in angularCompilerOptions can improve debugging as well as code maintainability.
  • There are ~15 bugs in the arising in the app if I enable type checking, eg: Screenshot from 2020-08-18 21-44-58
  • These can be resolved later, but this option will reduce code flexibility.

Runtime Translations can be enabled

Build

  • App builds within 20 minutes probably because of Ivy, No need to disable webpack plugins.
  • Differential Loading is still disabled although app compiles and builds with it, my browser is giving off pollyfiling bugs with it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment