我之前也碰到过这个一模一样的坑！结合你需要用APP_BASE_HREF获取assets资源、同时使用懒加载路由的场景，给你几个靠谱的解决方案：

1. 移除手动配置的APP_BASE_HREF，依赖Angular自动注入 #

这是最推荐的方案，因为Angular已经会根据你构建时指定的--base-href或者index.html里的<base>标签自动提供APP_BASE_HREF的值，不需要手动在app.module.ts的providers里配置。

操作步骤： #

• 删掉app.module.ts里providers中关于APP_BASE_HREF的配置项
• 在需要获取base-href的服务中，直接注入APP_BASE_HREF即可：

import { Inject, Injectable } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class AssetService {
  constructor(@Inject(APP_BASE_HREF) private baseHref: string) {}

  getFullAssetPath(assetName: string): string {
    // 拼接assets路径，比如转为 /deeper/inside/assets/icon.png
    return `${this.baseHref}assets/${assetName}`;
  }
}

• 构建时依然指定正确的base-href：ng build --base-href /deeper/inside/

这样既保留了获取base-href的能力，又不会让路由重复添加base-href到hash路径里，因为Angular的路由模块会自动识别正确的base-href，不会在hash部分重复追加。

2. 确保手动配置的APP_BASE_HREF与构建参数完全一致 #

如果你因为某些场景必须手动配置APP_BASE_HREF（比如动态获取部署路径），一定要保证配置的值和构建时的--base-href完全一致，包括末尾的斜杠。

正确示例： #

• app.module.ts的providers配置：

providers: [
  { provide: APP_BASE_HREF, useValue: '/deeper/inside/' }
]

• 构建命令：ng build --base-href /deeper/inside/

同时检查你的路由配置，所有路由路径都是从#之后的根路径开始定义（比如master而不是/deeper/inside/master），懒加载模块的路由配置也要遵循这个规则。

3. 排查路由配置中的冗余路径 #

偶尔也会出现路由配置里不小心加了base-href前缀的情况，比如把路由路径写成了/deeper/inside/master，这会导致路由生成时重复拼接。确保所有路由路径都是相对hash根路径的，比如：

const routes: Routes = [
  {
    path: 'master', // 正确：从#/之后开始
    loadChildren: () => import('./master/master.module').then(m => m.MasterModule)
  }
];

为什么注释APP_BASE_HREF能解决问题？ #

当你手动在providers里注入APP_BASE_HREF时，如果和Angular自动从<base>标签获取的值重复，路由模块在生成hash路径时会错误地将base-href追加到hash部分，导致出现#/deeper/inside/master...这种重复的路径。移除手动配置后，Angular会使用正确的base-href值，路由生成逻辑也会恢复正常。

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