Angular 7带身份验证的延迟加载

Question

我正在尝试从应用程序模块延迟加载模块。但是，它并没有被懒惰加载，而且URL导航也不能正常工作。当我尝试访问我的懒惰加载模块组件时，我遇到了如下错误。。。。

core.js:14597错误：Uncaught(在promise中(：TypeError：undefined不是函数TypeError:undefined不是函数在Array.map((在webpackAsyncContext($_lazy_route_resource惰性命名空间对象：21(位于SystemJsNgModuleLoader.push../node_modules/@angular/core/fem5/core.js.SystemJsNgModuleLoader.loadAndCompile(core.js:117170(位于SystemJsNgModuleLoader.push../node_modules/@angular/core/fem5/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/operations/mergeMap.js.MergeMapSubscriber._tryNext(mergeMap.js:61(在MergeMapSubscriber.push../node_modules/rxjs_esm5/internal/operations/mergeMap.js.MergeMapSubscriber._next(mergeMap.js:51(在MergeMapSubscriber.push../node_modules/rxjs/\esm5/internal/Subscriber.js.Subscriber.ext(Subscriber.js:54(在Array.map((在webpackAsyncContext($_lazy_route_resource惰性命名空间对象：21(位于SystemJsNgModuleLoader.push../node_modules/@angular/core/fem5/core.js.SystemJsNgModuleLoader.loadAndCompile(core.js:117170(位于SystemJsNgModuleLoader.push../node_modules/@angular/core/fem5/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/operations/mergeMap.js.MergeMapSubscriber._tryNext(mergeMap.js:61(在MergeMapSubscriber.push../node_modules/rxjs_esm5/internal/operations/mergeMap.js.MergeMapSubscriber._next(mergeMap.js:51(在MergeMapSubscriber.push../node_modules/rxjs/\esm5/internal/Subscriber.js.Subscriber.ext(Subscriber.js:54(在resolvePromise(zone.js:814(在resolvePromise(zone.js:771(在zone.js:873在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDeliage.invokeTask(zone.js:421(位于Object.onVokeTask(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(区域.js:595(按/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 {}

Answer 1

不确定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>

步骤3:管理员例程模块.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 { 
}