CODEWITHSUNDEEP
angulartypescript
William Moore
William Moore

Reputation: 3994

Angular 2 Project with Lazy Loading Submodules not resolving submodules on first compilation attempt

I have an Angular 2 (angular cli 1.3.2) project which is broken down into multiple modules with lazy loading. The main module uses the following code to load the sub-modules inside my router:

{
    path: 'module2',
    loadChildren: 'modules/module2/module2.module.ts#Module2Module',
    canActivate: [Guard]
},

When I run ng serve it gives the following error message:

ERROR in Could not resolve "modules/module2/module2.module.ts" from "<..>/app/app.module.ts".

When I save any file in the project (triggering a re-build) the build is successful and both modules work as expected. I don't even need to change the file!

Is there a way to resolve this issue, or could this be a bug?

Thanks

Upvotes: 2

Views: 846

Answers (3)

bgraham
bgraham

Reputation: 2027

I think your answer might not be the best one. You're app is compiling, but you don't have lazy loading now. If your app grows large enough, the initial load will be very slow without lazy loading.

Just to explain it a little, lazy loading means it will load those modules in separate javascript requests instead of compiling them all into one huge file. This is very configurable and you can aggressively lazy load them, or load them as the user clicks around in your site. It's super nice and necessary for performance on large production apps.

I believe as @AndreaM16 suggested your route in the routing was wrong. It looks like you might have called it "Module2Module" but it should just be "Module2". Try this:

{
    path: 'module2',
    loadChildren: './modules/module2/module2.module#Module2Module',
    canActivate: [Guard]
},

If this doesn't work, it would help a lot to see your file structure, and maybe the Module2 code.

One more note, you will also have to strip Module2 and the import { Module2 } from './modules/module2/module2.module' statement from you AppModule. Webpack will search these import statements for stuff to bundle into the package. That's why the lazy loading uses a magic string, webpack wont find the real module code and it wont be bundled into the first javascript bundle. The Angular code knows how to parse that string and load that javascript module and will do so lazily.

Upvotes: 0

Tzach Ovadia
Tzach Ovadia

Reputation: 1316

I think you should use lazy-loading if it can improve your initial load time.

app-routing.module.ts should have an entry like this (assuming modules folder in in src/app)

{
    path: 'module2',
    loadChildren: './modules/module2/module2.module#Module2Module',
    canActivate: [Guard]
}

Note there's no file extension in module's path.

Upvotes: 4

William Moore
William Moore

Reputation: 3994

Found a fix by removing Lazy Loading:

In the app.module.ts file include both imports to the app.router.ts and the modules/module2/module2.module.ts file. Then inside the 'includes' part of '@NgModule' ensure that Module2 is before the main App router:

import { RouterModule, Router } from '@angular/router';
import { NgModule } from '@angular/core';

import { appRoutes } from './app.router';
import { Module2 } from './modules/module2/module2.module';

// Other imports

@NgModule({
  declarations: [..],
  imports: [
    ..,
    Module2,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [..],
  entryComponents: [..],
  bootstrap: [..]
})
export class AppModule {  }

The error I was seeing was due to the incorrect order of the imports, as specified under Milestone 3 of Angular Routing Guide

Thanks to the people who commented suggesting solutions!

Upvotes: 2

Related Questions