32

I'm upgrading from Angular 4.0.0 to Angular 5.2.6

i'm facing some problem to get lazy module loading working.

with angular 4.0.0 , it works fine , but now , with 5.2.6 , i getting such an error when clicking my redirecting button :

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)

my routing file looks like this : 

const homeRoutes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
        ....
      {
        path: 'admin',
        loadChildren: 'app/home/admin/admin.module#AdminModule',
        canActivate: [AuthGuardAdmin]
      },
    ]
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class HomeRoutingModule { }

suggestions ??

firasKoubaa
  • 6,439
  • 25
  • 79
  • 148

10 Answers10

41

Do not import your lazy loaded module within your main app.module.ts. This will cause a circular dependency and throw the error you are receiving.

jetset
  • 882
  • 1
  • 9
  • 15
  • Then there will be no error and the routes are not changed to the targeted module..! I mean nothing will happen. – Rohit Sharma Jun 09 '18 at 12:50
  • @RohitSharma a lazy loaded module is loaded into the Angular Injector when it's in fact "lazily loaded" at run time. Not including it within your main app.module.ts allows the module and it's dependencies to load in when the user clicks the route. This syntax `app/home/admin/admin.module#AdminModule` is the road to that implementation. – jetset Jun 12 '18 at 22:51
19

I have changed the order of imports in my app.module.ts as mentioned here

So you need to have it for example like this:

imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
]

The most important is to have First BrowserModule and at the end AppRoutingModule.

Paul Roub
  • 36,322
  • 27
  • 84
  • 93
Mieszczańczyk S.
  • 857
  • 1
  • 9
  • 16
14

Solution 1

Imports order does matter so import lazy loaded module in top and router module in the last place. Because we are doing lazy loading, that lazy-loaded module has to exist before we do routing.

imports: [
    BrowserModule,       
    HeroModule, // Lazy-loaded module

    AppRoutingModule
  ],

Solution 2

Usually Angular CLI will import the module to app-module when it was generated. so make sure lazy-loaded module was not imported in app-module

Ram Chandra Neupane
  • 1,826
  • 3
  • 19
  • 36
12

I'm experiencing the same issue. This could be a bug with the angular-cli. I'm still not sure whether the bug is in the cli or in our code! As mentioned by Gerrit it's still possible to compile with aot: ng serve --aot

I've also resolved the issue by downgrading my angular-cli from 1.7.2 to 1.6.8, which is the last CLI-Version which seems to work in our case.

Alex T
  • 365
  • 1
  • 11
11

As mentioned in https://github.com/angular/angular-cli/issues/9488#issuecomment-368871510 it seems to work with ng serve --aot

Gerrit
  • 641
  • 1
  • 5
  • 19
7

ng service --aot while it compiles your code, is not a solution, it's just a coverup. If you determined that it was not the CLI version try the below solution.

What you need to do is make sure in your app.module.ts you are not loading your lazy loaded module.

For instance:

app.module.ts
 imports: [
   ...
   AppRouterModule,
   FormsModule,
   YourFeatureModule, <--- remove this
   ...
 ]

Make sure YourFeatureMOdule is being loaded via the routes ie: 

app-routing.module.ts
 loadChildren: '../app/feature.module#YourFeatureModule'

Hope this helps

Nosniw
  • 191
  • 2
  • 5
3

i have resolved this issue by upgrading mt angular-cli locally in the devDependenices (package.json) from 1.2.0 to 1.6.7

firasKoubaa
  • 6,439
  • 25
  • 79
  • 148
3

I had exactly the same issue but simply restarting the nodes server (ng s) did the trick for me.

As a rule of thumb: if angular starts behaving strange, first try to restart your nodes server

unkreativ
  • 482
  • 2
  • 8
3

Was facing the same issue. Restarting the angular server ng-serve worked for me.

User0706
  • 1,067
  • 1
  • 18
  • 34
0

use ng serve --aot instead. It is usually Angular CLI that added the lazy-loaded Angular module to AppModule when it was generated.

user10793582
  • 1