Not able to serve my angular app after upgrading from Angular 8 to 9

Question

My angular project is currently running in Angular 8 and I use HeroDevs\Hero-Loader (https://www.npmjs.com/package/@herodevs/hero-loader/v/2.0.1) for lazy loading of modules for a page containing tabs. Tabs data are lazy loaded whenever user clicks on a tab. Now I am trying to upgrade the Angular to the latest Angular 14 step-by-step. So while migrating to Angular 9 ng serve fails and I get the below error.

** Module not found: Error: Can't resolve '@herodevs/dynamic-component-service' ERROR in ./src/$$_lazy_route_resource lazy namespace object** The looks to be from the lazy loading of Hero Devs/hero-module module.

Any suggestions would be of great help.

Thanks.

Answer 1

For anyone who faces the same issue, I fixed this issue by replacing the HeroDevs component. The issue was with the npm package Herodevs which was deprecated from Angular 9 because angular has exposed the loading of component dynamically. This meant HeroDevs is not needed. Hence I created a custom module loader to replace HeroDevs component. That fixed all the issues.

Answer 2

how did you upgrade from Angular 8 to 9? did you use ng update?

I always use the Angular Update Guide for this (https://update.angular.io/?v=8.0-9.0)

From 8 to 9 the following is mentioned here regarding lazy loaded modules:

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.

So your Routes should look something like that

const routes: Routes = [{
    path: 'lazy',
    // The new import() syntax
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];