Question

以前，我开发了一个基于ASP MVC框架的角度项目。现在我想把它改成Angular-cli。但我在儿童路由器中遇到了一些延迟加载器的路由器问题。

两个'Industries'模块是随机加载的，每次加载它们都会加载，导航时永远不会改变。错误的代码如下：

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 { }

但是当我不使用延迟加载器时，它工作正常。正确的代码如下：

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

我之前在ASP MVC中的项目，我在HomeModule中使用以下路由器。但是在Angular-cli中，它说“找不到模块”，请帮助我。

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 { }

'IndustriesModule'和'Industries1Module'几乎相同，但HTML文件仅在测试时有所不同。问题是'IndustriesModule'可以成功加载，但当我导航到'/ home / industries1'时，无法加载'Industries1Module'。反之亦然，当'/ home / industries1'设置为默认网址时，可以成功加载'Industries1Module'，但当我导航到'/ home / industries'时，无法加载'IndustriesModule'。所以我认为这个问题应该与'home'html或appRoutes有关。

Answer 1

在loadChildren中，您必须指定由＃。

分隔的文件名和模块名称

{ path: 'industries', loadChildren: 'app/industries/industries.module', canActivate: [AuthGuard] },
{ path: 'industries1', loadChildren: 'app/industries1/industries1.module', canActivate: [AuthGuard] },

因此，您必须使用'app/industries/industries.module'而不是'app/industries/industries.module#InsertModuleNameHere'。

懒加载不适用于儿童路由器

1 个答案: