[英]Angular Lazy loading not Navigating
I'm want to implement Angular lazing loading in my app. 我想在我的应用程序中实现Angular延迟加载。
I read through so many books and it seems this the normal way to do it, maybe I missed something important and it's been two days. 我读了很多书,看来这是正常的做法,也许我错过了一些重要的事情,而且已经过去了两天。
https://github.com/kondasMajid/angula-lazy-loading https://github.com/kondasMajid/angula-lazy-loading
App-routing-Module.ts 应用路由-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 app.component.html
<button routerLink="/view">view</button>
<router-outlet></router-outlet>
view.module.ts 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 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() {}
}
There seems to be a lot of problems with your current implementation: 当前的实现似乎有很多问题:
forChild
instead of forRoot
in your AppRoutingModule. forRoot
中使用了forChild
而不是forRoot。 ViewModule
you're doing I don't know what. ViewModule
您正在执行我不知道的操作。 Ideally, your Routes
should be defined in a ViewRoutingModule and then the RouterModule
should be exported from there and imported in your ViewModule. Routes
,然后将RouterModule
从那里导出并导入到ViewModule中。 ''
) in your AppRoutingModule's Routes
config might end up being an infinite loop. ''
)在AppRoutingModule的Routes
配置可能最终成为一个无限循环。 So you might want to redirect to somewhere else in that case. Fixing these two issues should make it work: 解决这两个问题应使其起作用:
AppRoutingModule : 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 : 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 : 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 { }
Here's a Sample StackBlitz for your ref. 这是供您参考的示例StackBlitz 。
Your app.routing.ts
should read like this that will be the first change 您的
app.routing.ts
应该是这样的,这将是第一个更改
imports[RouterModule.forRoot(routes)],
Second change is that you need to redirectTo
correct path when your route is empty 第二个变化是您需要
redirectTo
以在路径为空时更正路径
Try something like this 试试这个
{
path: '',
redirectTo: '/view',
pathMatch: 'full'
}
Hope these changes will work - happy coding :) 希望这些更改能起作用-编码愉快:)
Update: 更新:
I think you missed a major missing here - I don't see your AppRoutingModule
imported inside your AppModule
我认为您错过了这里的主要缺席-我看不到将
AppRoutingModule
导入到AppModule
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule //This will do the trick
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Try the above changes and import your routing inside your module - Hope it works 尝试上述更改并将您的路由导入模块中-希望它能起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.