EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'
For Angular 8 and 9, the lazy load declaration changed. Since Angular 8 introduced the new recommended module loading method, previously the default method of lazy loading modules was to specify a string path to a module:
{ path: 'auth', loadChildren: 'src/app/auth/auth.module#AuthModule' }
The method of importing modules has changed to dynamic import. The dynamic import is promise-based and gives you access to the module, where the module’s class can be called. Thus your import should now be changed to:
{ path: 'auth', loadChildren: () => import('src/app/auth/auth.module').then(m => m.AuthModule) }
I landed on this question with very similar symptoms and context, so it seems useful to remark that this answer to another question helped me out.
In my specific case, I was somewhat following the lazy feature modules docs, and I even faithfully tried to replicate the associated StackBlitz example code. For some reason that example gets away with:
loadChildren: 'app/customers/customers.module#CustomersModule'
And even though my Angular CLI (v6) based experiment had similar folder structure, I needed to do either this:
// Full path including `src` at the start:
loadChildren: 'src/app/customers/customers.module#CustomersModule'
or this:
// Relative path from the `app-routing.module.ts` file:
loadChildren: './customers/customers.module#CustomersModule'
No clue why the StackBlitz example gets away with the first code example, but the other two both make sense and work for me when doing ng serve
.
You need to change your app-routing.module.ts in
import { RouterModule } from '@angular/router';
const routes = [
{path : '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
{path: 'devis', loadChildren: () => import('./forms/forms.module').then(m => m.FormsModule) }
];