我想在我的应用程序中实现Angular延迟加载。
我读了很多书,看来这是正常的作法,也许我错过了一些重要的事情,已经两天了。
https://github.com/kondasMajid/angula-lazy-loading
App-routing-Module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: '',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomeModule'
},
{
path: 'view',
loadChildren: 'app/view/view.module#ViewModule'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<button routerLink="/view">view</button>
<router-outlet></router-outlet>
view.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ViewRoutingModule } from './view-routing.module';
import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view.component';
const routes: Routes = [
{
path: '',
component: ViewComponent
}
];
@NgModule({
declarations: [],
imports: [
CommonModule,
ViewRoutingModule,
RouterModule.forChild(routes)
]
})
export class ViewModule { }
view.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
答案 0 :(得分:1)
您当前的实现似乎有很多问题:
forChild
而不是forRoot
。ViewModule
中,您在做什么,我不知道。理想情况下,Routes
应该在ViewRoutingModule中定义,然后RouterModule
应该从那里导出并导入到ViewModule中。''
配置中的空路由(Routes
)可能最终成为无限循环。因此,在这种情况下,您可能想重定向到其他地方。解决这两个问题应使其起作用:
AppRoutingModule :
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomeModule'
},
{
path: 'view',
loadChildren: 'app/view/view.module#ViewModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
ViewRoutingModule :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view/view.component';
const routes: Routes = [
{
path: '',
component: ViewComponent
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
})
export class ViewRoutingModule { }
ViewModule :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ViewRoutingModule } from './view-routing.module';
import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view/view.component';
@NgModule({
declarations: [ViewComponent],
imports: [
CommonModule,
ViewRoutingModule
]
})
export class ViewModule { }
这是您推荐的Sample StackBlitz。
答案 1 :(得分:1)
您的app.routing.ts
应该是这样,这将是第一个更改
imports[RouterModule.forRoot(routes)],
第二个变化是,当您的路线为空时,您需要redirectTo
纠正路径
尝试这样的事情
{
path: '',
redirectTo: '/view',
pathMatch: 'full'
}
希望这些更改会起作用-编码愉快:)
更新:
我认为您错过了这里的主要遗漏-我看不到您的AppRoutingModule
内已导入AppModule
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule //This will do the trick
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
尝试上述更改并将您的路由导入模块中-希望它能起作用