在 Angular 路由中找不到模块

Question

My folder structure is:

+-- app.module.ts
+-- app.routing.ts
+-- app.component.ts
+-- account/
|   +-- account.module.ts
|   +-- account.routing.ts
|   +-- account.component.ts

In my app.routing.ts I have,

  { path: 'account', loadChildren: './account/account.module#AccountModule' },

And, in account.routing.ts, I have,

  { path: 'login', component: LoginFormComponent}

but when I enter page/account/login I get the following error:

NodeInvocationException: Uncaught (in promise): Error: Cannot find module './account/account.module'. Error: Cannot find module './account/account.module'.

I've tried changing ./account/account.module#AccountModule to app/account/account.module#AccountModule, same error.

Any thoughts? Thanks in advance.

Answer 1

you can try changing

  { path: 'account', loadChildren: './account/account.module#AccountModule' }

to

import {AccountModule} from './path';

{ path: 'account', loadChildren: ()=> AccountModule' }

note - do not forget to import module as above

Answer 2

The string version of loadChildren has been deprecated in angular 8

See: https://github.com/angular/angular/blob/master/CHANGELOG.md#800-2019-05-28 See: https://angular.io/api/router/LoadChildren

New syntax in angular 8/9

The new syntax takes a dynamic import expression . This is a function that returns an import. It is critical that you import your module there. Otherwise you are not lazy loading the module, but eagerly loading it.

{ 
path: 'account', 
loadChildren: ()=> import('./account/account.module').next(mod => mod.AccountModule) 
}

The docs: https://angular.io/api/router/LoadChildrenCallback

New syntax in angular 10

In angular 10 the syntax slightly changed again. Now it provides the import as a result of a JavaScript Promise ( import returns a Promise : ):

{ 
path: 'account', 
loadChildren: ()=> import('./account/account.module').then(mod => mod.AccountModule) 
}

Warning: Assigning a module after importing will not lazy load your module!

S.Pradeep's solution will still eagerly load the module! You can check for yourself by implementing both approaches while checking the new (lazy loaded) network request navigating to a lazy loaded path.

Answer 3

Make sure that your account module sould have a single route like below

code for routing which will be routed once the module is lazy loaded

const routes: Routes = [{
  path: ':something',
  component: AccountComponent,
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AccountRoutingModule {
}

Calling the routing module in core module

@NgModule({
  imports: [
    CommonModule,
    NgbModule.forRoot(),
    AccountRoutingModule,
    ...

Answer 4

I had the same issue, i tried couple of things. But changing app.routing.ts does the trick.

just replace your line with :

{ path: 'account', loadChildren: () => AccountModule },

I hope it helps