Ленивая загрузка не работает для угловых 4 - PullRequest
Новая
       3

Ленивая загрузка не работает для угловых 4

0 голосов
/ 07 мая 2018

Я новичок в angular, я практиковал ленивую загрузку, проблема, с которой я сталкиваюсь, заключается в том, что ленивый компонент отображается в самом начале, когда загружается все приложение, где домашний компонент должен быть по умолчанию. После этого, когда я нажимаю любой другой маршрут (дом / о), и они отображаются правильно, но после этого, когда я снова нажимаю на ленивый, это выдает мне ошибку ниже

enter image description here

Ниже мой 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

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Я знаю, что на этот вопрос уже дан ответ, но у меня есть одно решение для этого же.

Вы также можете использовать 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 . Я надеюсь, что это поможет / руководство для вас / других.

0 голосов
/ 07 мая 2018

В вашем ленивом модуле, когда вы пытаетесь импортировать RouterModule, это должен быть RouterModule.forChild (маршруты)

...