ng-update-v8

Angular8.md

---

Update MifosX Web App to Angular 8

---

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

Before Update

✔️ Anywhere you use Renderer, now use Renderer2

• Only Renderer2 is being used in the app

✔️ If you use the legacy HttpModule and the Http service, switch to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (you don't need to map to JSON anymore) and now supports typed return values and interceptors.

• Using HttpClient module only as stated in app.module.ts

✔️ Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.

• Using RxJS 6.5 in the app, no instance of rxjs-compat found.

✔️ If you use the Angular Service worker, migrate any versionedFiles to the files array. The behavior is the same.

• Using angular service worker (see app.module.ts), no versionedFiles found in ngsw-config.json, also see https://github.com/angular/angular/pull/23584/files.

✔️ Stop using matRippleSpeedFactor and baseSpeedFactor for ripples, using Animation config instead.

• No instance of matRippleSpeedFactor or baseSpeedFactor found in the app.

During the Update

✔️ Update to version 8 of the core framework and CLI by running ng update @angular/cli@8 @angular/core@8 in your terminal and review and commit the changes.

• Faced angular http module bug while trying to compile the app :

,

• The app augments existing angular http module to add custom methods
• The new http module has been coalesced into a single http.ts file in node modules which was the cause of the bug.
• Resolved by modifying import path.
• Commit

✔️ Replace /deep/ with ::ng-deep in your styles . /deep/ and ::ng-deepboth are deprecated but using::ng-deep is preferred until the shadow-piercing descendant combinator is removed from browsers and tools completely.

• No instance of /deep/ or ::ng-deep in the app.

⁉️ Angular now uses TypeScript 3.4, read more about errors that might arise from improved type checking.

• Need to test the app for such errors.

✔️ Make sure you are using Node 10 or later.

• App uses a Node 12.x environment.

✔️ The CLI's build command now automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json.

• I have opted out of differential loading because our build gets stuck at the end trying to generate ES5 bundles, see the following threads for details [1] [2] also see opt opt out guide, By this configuration Angular will make both es2015 and es5 bundles in a single build just like in Angular 7.

✔️ When using new versions of the CLI, you will be asked if you want to opt-in to share your CLI usage data. You can also add your own Google Analytics account. This lets us make better decisions about which CLI features to prioritize, and measure the impact of our improvements.

⁉️ If you use ViewChild or ContentChild, we're updating the way we resolve these queries to give developers more control. You must now specify that change detection should run before results are set. Example: @ContentChild('foo', {static: false}) foo !: ElementRef;. ng update will update your queries automatically, but it will err on the side of making your queries static for compatibility.

• Need to check for usecases where {static: false}

✔️ Update Angular Material to version 8 by running ng update @angular/material@8 in your terminal.

• I had to update angular cdk and angular flex-layout to v8 as well because these are circular dependencies, see this thread. Used ng update @angular/material@8 @angular/cdk@8 @angular/flex-layout@8.0.0-beta.27 instead.
• Commit

✔️ We have switched from the native Sass compiler to the JavaScript compiler. To switch back to the native version, install it as a devDependency: npm install node-sass --save-dev.

• No issues in App compilation.

✔️ If you are building your own Schematics, they have previously been potentially asynchronous. As of 8.0, all schematics will be asynchronous.

• No instance of custom schematics found.

After Update

✔️ 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.
• Commit

Currently the App takes 30-40 minutes to build possibly because of large number of modules, The build consumes excesive time [1] optimizing for ModuleConcatenationPlugin. It can be speed up by disabling the plugin however this will cost us in production build performance.