Cannot find module in Angular routing

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.

Have you tried /app/account/account.module#AccountModule ? Relative paths in Angular causes strange unexpected results all the freaking time. — Iskandar Reza
– Iskandar Reza, Commented Oct 20, 2017 at 17:50
How about other parts of your code? Where is the promise getting it's data? I once had to spend two days on a very very similar problem because I did not put two dots (..) and a slash (/) in front of my API endpoint, just to give you an idea on the kind of debugging you can expect with this paths problem. — Iskandar Reza
– Iskandar Reza, Commented Oct 20, 2017 at 17:56
Can you show AccountModule code? Have to tried eager loading? if yes, did that work? — Sandeep Gupta
– Sandeep Gupta, Commented Oct 20, 2017 at 18:06

S.Pradeep · Accepted Answer · 2018-07-04 11:39:45Z

14

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

answered Jul 4, 2018 at 11:39

S.Pradeep

5271 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HungNM2 Over a year ago

it should be the correct answer. My code not work with the first way: { path: 'account', loadChildren: './account/account.module#AccountModule' }

Shawn Over a year ago

I don't know why the original method of implementing loadChildren isn't working, but this did solve the issue for me.

Piro Over a year ago

I expect symbolic link/junction or parent path with spaces might be an issue. Original works for colleague but not for me (And I use ntfs junction with path containing spaces).

William Hou Over a year ago

That solved my problem. But I don't understand: how the hell did you get that idea? I would never have thought about that. Thanks!

Rob Monhemius · Accepted Answer · 2020-08-19 09:32:01Z

3

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.

edited Aug 19, 2020 at 9:32

answered Apr 27, 2020 at 15:53

Rob Monhemius

5,1942 gold badges24 silver badges53 bronze badges

3 Comments

ChinaHelloWorld Over a year ago

This solution work well in Angular10. Old way: { path: 'account', loadChildren: './account/account.module#AccountModule' } is work in Angular 6.

ChinaHelloWorld Over a year ago

In Angular10, change a little bit as: { path: 'account', loadChildren: ()=> import('./account/account.module').then(mod => mod.AccountModule) }

Rob Monhemius Over a year ago

@ChinaHelloWorld Thx for the comment! I updated the answer to also provide angular 10's syntax ;).

Aniruddha Das · Accepted Answer · 2017-10-20 18:54:25Z

0

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,
    ...

answered Oct 20, 2017 at 18:54

Aniruddha Das

21.8k27 gold badges105 silver badges135 bronze badges

1 Comment

Emmanuel John Over a year ago

Looking at his setup, looks like he's trying to do lazy loading. This solution will make it eager load.

tahi · Accepted Answer · 2020-06-16 01:21:13Z

0

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

answered Jun 16, 2020 at 1:21

tahi

135 bronze badges

Collectives™ on Stack Overflow

Cannot find module in Angular routing

4 Answers 4

4 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related