我有一个带有几个延迟加载模块的Angular CLI应用程序,其中一些包含自己的路由器出口 . 从应用程序的根目录导航时,我可以轻松访问所有路由 . 但是,如果我尝试直接路由到延迟加载模块中的路由,则浏览器似乎尝试从不存在的文件夹加载应用程序 .
例如,根路由模块的路由如下所示:
{
path: 'A', loadChildren:
'./A/A.module#AModule',
canActivate: [LoadGuardService]
}
AModule然后有这个路线:
export const AModRoutes: Routes = [
{
path: '', component: AHomeComponent, children: [
{ path: 'building', pathMatch: 'full', component: BuildingComponent },
{ path: 'sitewide', pathMatch: 'full', component: SitewideComponent },
{ path: 'spaces', pathMatch: 'full', loadChildren: '../spaces/spaces.module#SpacesModule' }
]
}
];
如果我从头开始加载应用程序(在端口4200上运行),我可以单击并导航到 127.0.0.1:4200/A/building
,但是我无法直接导航到同一个URL .
控制台给出了一堆这样的错误:
GET http://127.0.0.1:4200/es/inline.bundle.js net::ERR_ABORTED building:20 . . . GET http://127.0.0.1:4200/es/main.bundle.js 404 (Not Found) build:20
我想知道这是否与错误设置基本href或其他东西有关 . 我最近切换到CLI并且必须将 { provide: APP_BASE_HREF, useValue: '/' }
添加到根模块提供程序以使其正常工作 .
我在写这个问题时发现的更多:一旦我导航到 A/building
,我可以使用 A/sitewide
,但不能 B/
或 A/spaces
. 在切换到CLI之前,这不是问题
编辑:添加根路由器模块(至少大部分)
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoadGuardService } from "./services/load-guard.service";
export const APPROUTES: Routes =
[
{
path: 'A', loadChildren:
'./A/A.module#AModule',
canActivate: [LoadGuardService]
},
{
path: 'B', loadChildren:
'./B/B.module#BModule',
canActivate: [LoadGuardService],
data: { byPhone: false }
},
...
];
@NgModule({
imports: [RouterModule.forRoot(APPROUTES)],
exports: [RouterModule],
providers: [LoadGuardService]
})
export class AppRoutingModule { }
需要说明的是,Routes数组中的省略号不在实际代码中 . 只是为了缩短片段
1 回答
我不记得在什么时候我必须将
{ provide: APP_BASE_HREF, useValue: '/' }
添加到app.module,但是当我这样做时,我在index.html中注释了<base href="/">
(当时,这似乎有效) . 我取消注释这条线,现在一切正常 . 有人可以解释APP_BASE_HREF的作用吗?