Angular-cli router lazy loading

Question

I am trying to run a sample web application to find out how lazy loading works with Angular modules. I created the application through angular-cli 1.0.0-beta.24, which uses Angular 2.4.1. I created the main application, and then 3 components. Then I added application-level routing and directly referenced the first two components by importing the components into the application module. For the third component, I simply added routing using the loadChildren method specified in Angular routing protocols . My routing configuration for the main application is as follows:

const appRoutes: Routes  = [
    { path: 'comp1', component: Comp1Component},
    { path: 'comp2', component: Comp2Component},
    { path: 'comp3', loadChildren: 'app/comp3/comp3.module'}
];

export default RouterModule.forRoot(appRoutes);

I turned the code for the third component into a module and removed all imports from the application into the third component. The routing configuration for the module is as follows:

const routes: Routes = [
    {path: '', component:Comp3Component}
];

export default RouterModule.forChild(routes);

When I launch the application, the routes for Comp1 and Comp2 work fine, when I click the link for Comp3 (module route), I get the following error registered on the console:

EXCEPTION: Uncaught (in promise): Error: Cannot find module ./comp3/comp3.module'.
Error: Cannot find module './comp3/comp3.module'.
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:77:8) [angular]

Webpack doesn't seem to handle lazy loading. I tried all variations of the "loadChildren" call paths, including:

loadChildren: 'app/comp3/comp3.module#Comp3Module'

no change in behavior (still get the error above). Something new in angular2 might be something in my code, but I can see that others are getting the same error. My google / stackoverflow foo didn't lead me to a solution. I have added my sample application to my Github account here .

, Angular, StackOverflow, plunkr. , - , - , , plunkr ng .

. html : ( github):

 <h1>
    {{title}}
 </h1>
 <ul>
    <li><a class="nav-link" routerLink="/comp1" routerLinkActive="active">Component 1</a></li>
    <li><a class="nav-link" routerLink="/comp2" routerLinkActive="active">Component 2</a></li>
    <li><a class="nav-link" routerLink="/comp3" routerLinkActive="active">Component 3</a></li>
  </ul>
  <p></p>
  <router-outlet></router-outlet>

( src/app down) angular2 , tweeks, , angular -cli. , TS, - :

{ path: 'comp3', loadChildren: './comp3/comp3.module#Comp3Module'}

loadChildren. Github, , angular -cli.

Answer 1

comp3.routes.ts:

export default RouterModule.forChild(routes);

To:

export const comp3Routing = RouterModule.forChild(routes);

comp3.module.ts :

import comp3Routes from "./comp3.routes";

To:

import { comp3Routing } from "./comp3.routes";

, comp3Routing, :

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        comp3Routing,
    ],
    declarations: [
        Comp3Component
    ],
    exports: [
        Comp3Component
    ],

    providers: [],
})
export class Comp3Module { }

comp3 .

Answer 2

?

, ( + ):

{ path: 'lazy', loadChildren: './omfpages/+lazy/lazy.module#LazyModule' }], canActivate: [AuthGuard] }

angular cli w/webpack.

, routerLink ?

Ours:

routerLink: ['omfpages/lazy/page32']   

, "lazy" - , . App.router " 32" .

:

...
const routes: Routes = [
  { path: 'page30', component: Page30Component, data: { title: 'Fun     Page'} },
  { path: 'page31/:id', component: Page31Component, data: { title:     'Another Page'} },     // <-- this route requires a param to be passed.
  { path: 'page32', component: Page32Component, data: { title: 'Some Page'} }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Answer 3

loadChildren, :

app.route.ts

// have to be export modules to handle the lazy loading routing
export function loadExampleModuleOne() {  return ExampleModuleOne } 
export function loadExampleModuleTwo() { return ExampleModuleTwo }

:

const APP_ROUTE: Routes = [
  {
    path: '',
    redirectTo: 'example-one',
    pathMatch: 'full'
  },
  {
    path: 'example-one',
    loadChildren: loadExampleModuleOne
  },
  {
    path: 'example-two',
    loadChildren: loadExampleModuleTwo
  }
];

export const AppRouting = RouterModule.forRoot(APP_ROUTE);

AppRouting app.module.ts, :

import {AppRouting} from './app.routing';


@NgModule({
   import: [
     AppRouting
   ]
})
export class AppModule() {
}