angular 直接加载带有嵌套 router-outlet 的惰性模块

Question

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

Answer 1

我不记得我在什么时候必须将 { provide: APP_BASE_HREF, useValue: '/' } 添加到 app.module，但是当我这样做时，我在 index.html 中注释掉了 <base href="/">（当时，这似乎行得通）。我取消注释那条线，现在一切正常。有人可以解释一下 APP_BASE_HREF 的作用吗？

angular 直接加载带有嵌套 router-outlet 的惰性模块

angular directly load a lazy module with nested router-outlet

lazy-loading

angular-routing

angular