angular directly load a lazy module with nested router-outlet

I have an Angular CLI application with several lazy loaded modules, some of which contain their own router-outlets. When navigating from the root of the application, I have no trouble accessing all routes. However, if I try to route directly to a route in a lazy loaded module, it appears that the browser tries to load the application from a folder which doesn't exist.

For Example, the root routing module has routes which look something like this:

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

AModule then has this for routes:

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

If I load the application from scratch (running on port 4200), I can click through and navigate to 127.0.0.1:4200/A/building, however I can't directly navigate to this same URL.

The console gives a bunch of errors like this:

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

I wonder if this is related to incorrectly setting the base href or something. I recently switched to the CLI and had to add { provide: APP_BASE_HREF, useValue: '/' } to the root module providers to get it working.

Something more I found while writing this question: Once I've navigated to, say, A/building, I can nvigate to A/sitewide, but not to B/ or A/spaces. This was not an issue before switching to CLI

EDIT: Adding root router module (most of it, at least)

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 { }

To be clear, the ellipsis in the Routes array is not in the actual code. Just to shorten the snippet