我正在尝试从my-app模块延迟加载模块。但是,它不会被延迟加载,并且URL导航无法正常工作。尝试访问惰性加载模块组件时,出现如下错误……
core.js:14597 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function at Array.map () at webpackAsyncContext ($_lazy_route_resource lazy namespace object:21) at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:17170) at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:17162) at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3608) at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3596) at MergeMapSubscriber.project (router.js:2605) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at Array.map () at webpackAsyncContext ($_lazy_route_resource lazy namespace object:21) at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:17170) at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:17162) at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3608) at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3596) at MergeMapSubscriber.project (router.js:2605) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:16147) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500) at 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 {}
答案 0 :(得分:0)
不知道为什么在Angular 7中路由失败。但是,当我构建示例应用程序时,它运行良好。
请在下面尝试以下代码。
步骤1:将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 { }
<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>
步骤2:路径路径的HTML
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 { }
第3步: admin-routing.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 {
}
第4步: admin.module.ts
email