Issue getting lazy loading to work with Angular2

Question

Note: I've searched a dozen other related questions regarding lazy loading on SO, but I wasn't able to solve my issue using them.

Error: Cannot find 'ContactModule' in 'app/contact.module'

I have started with a new project based on Angular CLI and the node console in Windows mentions webpack: Compiling... occasionally so I believe I'm using that, however I do not see any webpack.config.js in my project which other questions mentioned needing changes to.

Here's my app.module.ts:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'contact', loadChildren: 'app/contact.module#ContactModule' },
];

//...imports...
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    // ContactComponent,
    // ContactFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My sub module for lazy loading:

//...imports...
const ROUTES = [
  { path: '', component: ContactComponent },
];

@NgModule({
    declarations: [
        ContactComponent,
        ContactFormComponent
    ],
  imports: [RouterModule.forChild(ROUTES)],
})
class ContactModule {}

And some images of my folder structure and packages.json in case those are helpful.

user4137674 · Accepted Answer · 2017-02-09 18:56:01Z

1

First of all you should export your ContactModule:

export class ContactModule {}

answered Feb 9, 2017 at 18:56

user4137674

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

Comments

The Muffin Man · Accepted Answer · 2017-02-09 02:08:57Z

1

Took me a while to figure this out since many of the answers I came across didn't have it in their example...

The lazy loaded module needs to have export in the class and CommonModule needs to be imported as well as any other things you are using such as forms.

answered Feb 9, 2017 at 2:08

The Muffin Man

20k30 gold badges128 silver badges196 bronze badges

Collectives™ on Stack Overflow

Issue getting lazy loading to work with Angular2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related