How to get Lazy Loading working #1231

New Issue

fergalmoran · 2025-08-09T17:19:21Z

fergalmoran commented

2025-08-09 17:19:21 +00:00

Originally created by @JohnGalt1717 on 11/26/2016

I've tried this: https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.b2e5z0v00

I followed the directions to add the npm modules etc.

in webpack.config.js on the .ts$ loader I added this to the loaders array: 'angular2-router-loader'

I then updated the app.module.ts file like this:

`import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';

@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent
],
imports: [
UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './components/home/home.component#HomeComponent' },
{ path: 'counter', loadChildren: './components/counter/counter.component#CounterComponent' },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModule {
}
`

When I run this in the /wwwroot/dist folder there is now a 1.1.js and a 2.2.js file. And I get the following:

Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No NgModule metadata found for 'HomeComponent'.
Error: No NgModule metadata found for 'HomeComponent'.

What am I missing?

Also, when this is done, will pre-render still work and pre-render the pages with the lazy loaded page's HTML there?

Thanks!

(And if I'm not missing something, please share how to get lazy loading working in a supported way because beyond a trivial example any serious site will require lazy loading otherwise you'll be loading megabytes of data on first run.)

*Originally created by @JohnGalt1717 on 11/26/2016* I've tried this: https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.b2e5z0v00 I followed the directions to add the npm modules etc. in webpack.config.js on the .ts$ loader I added this to the loaders array: 'angular2-router-loader' I then updated the app.module.ts file like this: `import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { UniversalModule } from 'angular2-universal'; import { AppComponent } from './components/app/app.component' import { NavMenuComponent } from './components/navmenu/navmenu.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, NavMenuComponent ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: './components/home/home.component#HomeComponent' }, { path: 'counter', loadChildren: './components/counter/counter.component#CounterComponent' }, { path: '**', redirectTo: 'home' } ]) ] }) export class AppModule { } ` When I run this in the /wwwroot/dist folder there is now a 1.1.js and a 2.2.js file. And I get the following: Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: No NgModule metadata found for 'HomeComponent'. Error: No NgModule metadata found for 'HomeComponent'. What am I missing? Also, when this is done, will pre-render still work and pre-render the pages with the lazy loaded page's HTML there? Thanks! (And if I'm not missing something, please share how to get lazy loading working in a supported way because beyond a trivial example any serious site will require lazy loading otherwise you'll be loading megabytes of data on first run.)

fergalmoran closed this issue

2025-08-09 17:19:21 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1231