Angular懒加载模块URL路径配置问题：如何指定子模块加载路径？

我的Angular懒加载模块代码如下：

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];

运行应用时，Angular会尝试通过URL /items-items-module.js查找子模块文件，但项目部署在/scripts/angular目录下，构建后的模块实际路径为/scripts/angular/items-items-module.js，导致404错误。以下是几种指定子模块加载路径的解决方法：

方法1：修改构建时的baseHref配置 #

通过设置baseHref指定部署的基础路径，Angular会自动为懒加载模块的请求路径添加该前缀。

• 构建命令添加参数：

ng build --base-href /scripts/angular/

• 或直接在angular.json的architect.build.options中配置：

{
  "architect": {
    "build": {
      "options": {
        "baseHref": "/scripts/angular/",
        // 其他配置项...
      }
    }
  }
}

方法2：使用APP_BASE_HREF注入令牌 #

若不想修改构建配置，可在根模块中手动注入APP_BASE_HREF指定基础路径：

在app.module.ts中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [{ provide: APP_BASE_HREF, useValue: '/scripts/angular/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

方法3：调整路由loadChildren路径（不推荐） #

虽然可以尝试修改import的路径，但这并非Angular官方推荐的标准做法，容易引发路径维护问题，优先推荐前两种方法。

内容的提问来源于stack exchange，提问作者QwertyKeker