-2

I am working through an Angular training course (using Angular 12).

{ path: 'training', loadChildren: './training/training.module.ts#TrainingModule'},

is not working:

Unhandled Promise rejection: Cannot find module './training/training.module.ts' ; Zone: ; Task: Promise.then ; Value: Error: Cannot find module './training/training.module.ts

I am 100% certain that the path from app-routing.module.ts, which contains this code, is correct (I copy/pasted it, to make sure).

However, a previous course (by the same presenter), makes me think that the correct syntax ought to be:

{path: 'training', loadChildren: () => import('./training/training.module').then(module => module.TrainingModule)}

Why these two possibilities? Are they functionally equivalent? When should I use which?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Mawg says reinstate Monica
  • 38,334
  • 103
  • 306
  • 551
  • 1
    The second one is correct, since Angular v6 I think (maybe 8). The first one is the old format. – MikeOne Aug 23 '21 at 10:15
  • 1
    https://angular.io/guide/lazy-loading-ngmodules (it changed in Angular 8: https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27#b722). – jonrsharpe Aug 23 '21 at 10:15
  • 1
    Does this answer your question? [EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'](https://stackoverflow.com/questions/41396839/exception-uncaught-in-promise-error-cannot-find-module-app-home-home-modul) – jonrsharpe Aug 23 '21 at 10:20

1 Answers1

5

Lazy loading feature module syntax was changed at some point in major release of angular. In your case (Angular 12) use new syntax.

New syntax is

{path: 'training', loadChildren: () => import('./training/training.module').then(module => module.TrainingModule)}

and this will work with older anuglar applications

{ path: 'training', loadChildren: './training/training.module.ts#TrainingModule'},
Antoniossss
  • 31,590
  • 6
  • 57
  • 99
  • Thanks for the clarification (upvote + answer). The course is labelled Angular 12 on Udemy, but the content makes it clear that it is Angular 2 with some extra stuff inserted to cover breaking changes. – Mawg says reinstate Monica Aug 23 '21 at 10:45