角度直接加载具有嵌套路由器出口的延迟模块

我有一个Angular CLI应用程序,其中有几个延迟加载的模块,其中一些模块包含自己的路由器出口。当从应用程序的根目录导航时,我可以轻松访问所有路径。然而,如果我试图直接路由到延迟加载模块中的路由,那么浏览器似乎试图从不存在的文件夹加载应用程序。

例如,根路由模块有如下路由:

{
            path: 'A', loadChildren:
            './A/A.module#AModule',
            canActivate: [LoadGuardService]
        }

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' }
    ]
  }
];

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

{ provide: APP_BASE_HREF, useValue: '/' } 到根模块提供程序以使其工作。

在写这个问题时,我发现了更多的东西: A/building ,我可以 A/sitewide ,但不是 B/ A/spaces

编辑:添加根路由器模块(至少大部分)

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数组中的省略号不在实际代码中。只是为了缩短片段