懒加载不工作在儿童路由器
问题描述:
以前,我开发了一个基于ASP MVC框架的角度项目。现在我想把它改成Angular-cli。但是我遇到了儿童路由器中懒惰的加载器的一些路由器问题。懒加载不工作在儿童路由器
两个“工业”模块随机加载,每加载一次,导航时都不会改变。错码如下:
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'设置为默认url时,'Industries1Module'可以被成功加载,但当导航到'/ home/industries'时无法加载'IndustriesModule' 。 所以我认为这个问题应该与'home'html或appRoutes相关。
答
在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'
。
问题依然存在。 'IndustriesModule'可以成功加载,但当导航到'/ home/industries1'时,'Industries1Module'无法加载。任何想法?谢谢! –
您可以在您的问题中添加“industries.module.ts”和“industries1.module.ts”文件吗? – David
当然。 'IndustriesModule'和'Industries1Module'几乎相同,但HTML文件仅用于测试。 问题是'IndustriesModule'可以成功加载,但当导航到'/ home/industries1'时'Industries1Module'无法加载。 与之相反,当'/ home/industries1'设置为默认url时,'Industries1Module'可以被成功加载,但当导航到'/ home/industries'时无法加载'IndustriesModule' 。 所以我认为这个问题应该与'home'html或appRoutes相关。 –