[英]Lazy loading is not working for angular 4
我對angular不熟悉,我正在練習延遲加載,因此我面臨的問題是,當整個應用加載時,我會在一開始就顯示延遲組件,而home組件應該是默認組件。 之后,當我單擊任何其他路線(家庭/大約)時,它們會正確顯示,但在此之后,當我再次單擊惰性時,會出現以下錯誤
以下是我的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import{aboutComp} from './routingNav/aboutComp'
import {homeComp} from './routingNav/homeComp'
import { AppComponent } from './app.component';
import{Routes,RouterModule} from '@angular/router';
import { CustomersRoutingModule } from './lazyComp/lazyModule';
const routes : Routes=[
{path:"",redirectTo : '/home',pathMatch:"full"},
{path :"home",component:homeComp},
{path:"about",component:aboutComp},
{path:"lazy",loadChildren:'./lazyComp/lazyModule#CustomersRoutingModule'}
];
@NgModule({
declarations: [
AppComponent,
aboutComp,
homeComp, ],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
CustomersRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我的延遲加載模塊:
import { NgModule } from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import{lazyComp} from './lazyComp'
const routes1 : Routes=[
{path:"",component:lazyComp}
]
@NgModule({
declarations: [
lazyComp
],
imports:[RouterModule.forRoot(routes1)],
exports:[RouterModule]
})
export class CustomersRoutingModule { }
我沒有添加正在執行導航的位置,因為沒有錯誤,否則將無法正常工作。
請讓我知道我在做什么錯?
添加完全錯誤msg:
core.js:1449 ERROR Error: Uncaught (in promise): TypeError: undefined is
not a function
TypeError: undefined is not a function
at Array.map (<anonymous>)
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive
(main.bundle.js:13), <anonymous>:10:34)
at SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
at SystemJsNgModuleLoader.load (core.js:6554)
at RouterConfigLoader.loadModuleFactory (router.js:4595)
at RouterConfigLoader.load (router.js:4575)
at MergeMapSubscriber.eval [as project] (router.js:2061)
at MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
at Array.map (<anonymous>)
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive
(main.bundle.js:13), <anonymous>:10:34)
at SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
at SystemJsNgModuleLoader.load (core.js:6554)
at RouterConfigLoader.loadModuleFactory (router.js:4595)
at RouterConfigLoader.load (router.js:4575)
at MergeMapSubscriber.eval [as project] (router.js:2061)
at MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4751)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
defaultErrorLogger @ core.js:1449
ErrorHandler.handleError @ core.js:1510
next @ core.js:5508
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4322
(anonymous) @ core.js:4782
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4708
onHandleError @ core.js:4782
ZoneDelegate.handleError @ zone.js:392
Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
在您嘗試導入RouterModule的惰性模塊中,它應該是RouterModule.forChild(routes)
我知道這個問題已經回答,但是我有一個解決方案。
您還可以將loadChildren
用於延遲加載模塊,例如
import {CustomersModule} from './customers/customers.module'
const routes : Routes=[
{path:"",redirectTo : 'home',pathMatch:"full"},
{path :"home",component:HomeComponent},
{path:"about",component:AboutComponent},
{path:"lazy", loadChildren: () => CustomersModule}
];
RouterModule.forRoot(routes)
在其他模塊中
const routes : Routes=[
{path:"",redirectTo : 'lazy',pathMatch:"full"},
{path :"lazy",component:LazyComponent}
];
RouterModule.forChild(routes)
我已經在stackblitz上創建了一個演示。 我希望這會對您/其他人有所幫助/指導。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.