1

我正在尝试从 my-app 模块延迟加载模块。但是，它不会被延迟加载，并且 URL 导航无法正常工作。当我尝试访问我的延迟加载模块组件时，出现以下错误......

core.js:14597 错误错误：未捕获（承诺中）：TypeError：未定义不是函数
类型错误：未定义不是函数
    在 Array.map()
    在 webpackAsyncContext ($_lazy_route_resource 惰性命名空间对象：21)
    在 SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:17170)
    在 SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:17162)
    在 RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3608)
    在 RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3596)
    在 MergeMapSubscriber.project (router.js:2605)
    在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
    在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
    在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    在 Array.map()
    在 webpackAsyncContext ($_lazy_route_resource 惰性命名空间对象：21)
    在 SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:17170)
    在 SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:17162)
    在 RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3608)
    在 RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3596)
    在 MergeMapSubscriber.project (router.js:2605)
    在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
    在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
    在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    在 resolvePromise (zone.js:814)
    在 resolvePromise (zone.js:771)
    在 zone.js:873
    在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    在 Object.onInvokeTask (core.js:16147)
    在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    在 Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    在 drainMicroTaskQueue (zone.js:595)
    在 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500)
    在 ZoneTask.invoke (zone.js:485)

应用路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './shared/home/home.component';
import { PageNotFoundComponent } from './Error/page-not-found/page-not- 
found.component';
import { AuthGuard } from './authentication/auth.guard';
const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: HomeComponent },
   {
     path: 'users',
     canLoad: [AuthGuard],
     loadChildren: './user/user.module#UserModule',
     data: {role: 'user'}
   },
   { path: '**', component: PageNotFoundComponent }
 ];
 @NgModule({
 imports: [RouterModule.forRoot(routes, {enableTracing: true, useHash: 
 true})],
 exports: [RouterModule]
 })
 export class AppRoutingModule {}

用户模块路由

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';   
import { CartComponent } from './cart/cart.component';
import { PaymentComponent } from './payment/payment.component';
const routes: Routes = [
    { path: '', component: CartComponent},
    { path: 'payment', component: PaymentComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule {}
4

1 回答 1

0

不确定为什么您的路由在 Angular 7 中失败。但是当我构建示例应用程序时，它工作正常。

请尝试下面的代码。

第 1 步：创建admin区域作为延迟加载并在app-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full' },
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

第 2 步：路由路径的 HTML

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" routerLink="/">Home</a>
        <li class="nav-item">
            <a class="nav-link" routerLink="/admin">Admin </a> </li>
    </ul>
</nav>

第三步： admin-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const adminRoutes: Routes = [
  { path: '', component: DashboardComponent }
]

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

第 4 步： admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [DashboardComponent],
  imports: [CommonModule, AdminRoutingModule]
})
export class AdminModule { 
}
于 2018-11-30T05:37:37.447 回答