javascript - RouterModule.forRoot() 调用了两次
问题描述
我正在尝试在我的 Angular 5 应用程序中实现延迟加载,但出现错误:
未捕获(承诺):错误:RouterModule.forRoot() 调用了两次。延迟加载的模块应该使用 RouterModule.forChild() 代替。
那里有我的路由模块: app-routing.module.ts
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
// import Commponents for router
import { MainPageComponent } from "../pages/main/main-page.component";
import { AboutCompanyPageComponent } from "../pages/about-company/about-company-page.component";
import { MediaPageComponent } from "../pages/media/media-page.component";
import { ChangePasswordComponent } from "../components/change-password/change-password.component";
import { ConfirmOrderComponent } from "../pages/confirm-order/confirm-order.component";
import { NoConnectionComponent } from "../pages/no-connection/no-connection.component";
import { NotFoundComponent } from "../pages/not-found/not-found.component";
import { SearchComponent } from "../pages/search/search.component";
import { PaymentComponent } from "../pages/payment/payment.component";
import { WorkersGeoLocationComponent } from "../pages/workers-geo-location/workers-geo-location.component";
import { AdminProfileModule } from "../modules/admin-profile/admin-profile.module";
const routes: Routes = [
{
path: "",
component: MainPageComponent
},
{
path: "about",
component: AboutCompanyPageComponent
},
{
path: "payment",
component: PaymentComponent
},
{
path: "media",
component: MediaPageComponent
}, {
path: "profile/workersGeoLocation",
component: WorkersGeoLocationComponent
},
{
path: "admin",
loadChildren: '../modules/admin-profile/admin-profile.module#AdminProfileModule'
// loadChildren: () => AdminProfileModule
},
{
path: "password/recovery",
component: ChangePasswordComponent
},
{
path: "search",
component: SearchComponent
},
{
path: "confirm",
component: ConfirmOrderComponent
},
{
path: "no-connection",
component: NoConnectionComponent
},
{
path: "**",
component: NotFoundComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
在那里,我对 RouterModule 使用 forRoot() 方法。
在我的第二个模块中,它应该是延迟加载的,我使用 forChild() 方法,
有一些代码:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { OrdersTabComponent } from "../../components/tabs/orders-tab/orders-tab.component";
const routes: Routes = [
{
path: '',
component: OrdersTabComponent
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
})
export class AdminRoutingModule { }
正如您所见,RouterModule 只有两个具有不同方法的模块,我不明白哪里出错了。
有人可以帮我吗?
解决方案
//你应该像下面这样使用正确的子模块路径
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HashLocationStrategy ,LocationStrategy } from '@angular/common';
import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
import { NotFoundComponent } from './not-found/not-found.component';
import { IndexComponent } from './index/index.component';
const routes: Routes = [
{ path: "", component: IndexComponent},
{ path: "admin", loadChildren: "app/admin/admin-layout/admin-layout.module#AdminLayoutModule" },
{ path: "**", component: NotFoundComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(
routes,
{ preloadingStrategy: SelectivePreloadingStrategy }
)],
exports: [ RouterModule ],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
]
})
export class AppRoutingModule {}
推荐阅读
- c# - 将列表框中的项目显示到文本框
- django - 从Django的同一张表中获取每天的前n行
- typeorm - 如何在 TypeORM 中的实体中公开外键列
- python - 允许python程序接受十进制输入
- python - Pandas:如果日期在周日或周六,如何将周五作为工作日返回?
- javascript - 返回函数调用与仅在递归期间再次调用函数有什么区别?
- javascript - 当另一个 Input 控件的文本发生更改时,如何更改 Input 控件的值?
- pytorch - RuntimeError: 模块必须在设备 cuda:1 (device_ids[0]) 上有其参数和缓冲区,但在设备上找到其中之一:cpu
- airflow - 气流宏可以与 CloudSqlInstanceExportOperator 一起使用吗?
- jmeter - 获取响应消息:java.sql.SQLException:无法在 jmeter 中创建 PoolableConnectionFactory(通信链接故障)