lazy loading not working in children router

Question

Previously, i developed an angular project based on ASP MVC framework. Now I want to change it to Angular-cli. But I met some router problems with the lazy loader in children router.

Two 'Industries' modules are loaded randomly, each time on of them is loaded and never change when navigation. Wrong code is below:

export const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard],
        children: [
            { path: 'industries', loadChildren: './industries/industries.module', canActivate: [AuthGuard] },
            { path: 'industries1', loadChildren: './industries1/industries1.module', canActivate: [AuthGuard] },
        ]
    }
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

But when I don't use the lazy loader, it works fine. The correct code is as below:

    children: [
        { path: 'industries', component: IndustriesComponent, canActivate: [AuthGuard] },
        { path: 'industries1', component: Industries1Component, canActivate: [AuthGuard] },
    ]

My previous project in ASP MVC, i use the following router in HomeModule. But in Angular-cli, it says "Cannot find module", please help me.

export const homeRoutes: Routes = [
    {
        path: '', component: HomeComponent,
        children: [
            { path: 'industries', loadChildren: 'app/industries/industries.module', canActivate: [AuthGuard] },
            { path: 'industries1', loadChildren: 'app/industries1/industries1.module', canActivate: [AuthGuard] },
        ]
    }
];

@NgModule({
    imports: [
        CommonModule, ReactiveFormsModule, FormsModule,
        RouterModule.forChild(homeRoutes),
    ],
    declarations: [
        HomeComponent,
    ],
})

export default class HomeModule { }

'industries.module.ts'

import { NgModule } from '@angular/core';
import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';
import { PopupModule } from '@progress/kendo-angular-popup';

// components
import { IndustriesComponent } from './industries.component';

import { SharedCommonModule } from './../core/shared-module/shared-common.module';

import { CommonService } from "./../core/service/common.service";

import { ChartsModule } from '@progress/kendo-angular-charts';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { DialogModule } from '@progress/kendo-angular-dialog';


import {
    PaginationModule, ButtonsModule
} from 'ngx-bootstrap';


export const industriesRoutes: Routes = [
    {
        path: '', component: IndustriesComponent,
    }
];

@NgModule({
    imports: [
        CommonModule, ReactiveFormsModule, FormsModule,
        SharedCommonModule,
        DropDownsModule, ScrollViewModule,
        LayoutModule, ChartsModule, PopupModule,
        PaginationModule.forRoot(), ButtonsModule.forRoot(),
        RouterModule.forChild(industriesRoutes),
    ],
    declarations: [
        IndustriesComponent
    ],
})

export class IndustriesModule { }

'industries1.module.ts'

import { NgModule } from '@angular/core';
import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';
import { PopupModule } from '@progress/kendo-angular-popup';

// components
import { Industries1Component } from './industries1.component';

import { SharedCommonModule } from './../core/shared-module/shared-common.module';

import { CommonService } from "./../core/service/common.service";

import { ChartsModule } from '@progress/kendo-angular-charts';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { DialogModule } from '@progress/kendo-angular-dialog';


import {
    PaginationModule, ButtonsModule
} from 'ngx-bootstrap';


export const industries1Routes: Routes = [
    {
        path: '', component: Industries1Component,
    }
];

@NgModule({
    imports: [
        CommonModule, ReactiveFormsModule, FormsModule,
        SharedCommonModule,
        DropDownsModule, ScrollViewModule,
        LayoutModule, ChartsModule, PopupModule,
        PaginationModule.forRoot(), ButtonsModule.forRoot(),
        RouterModule.forChild(industries1Routes),
    ],
    declarations: [
        Industries1Component
    ],
})

export class Industries1Module { }

The 'IndustriesModule' and 'Industries1Module' are almost the same, but differ in HTML file only for test. The problem is 'IndustriesModule' can be successfully loaded, but 'Industries1Module' can't be loaded when i navigate to '/home/industries1'. The opposite is the same, when the '/home/industries1' is set as the default url, then 'Industries1Module' can be successfully loaded, but 'IndustriesModule' can't be loaded when i navigate to '/home/industries'. So i think the problem should be related to 'home' html or appRoutes.

lazy loading not working in children router

Answers (1)

Related Questions