Angular应用本地化后资源加载失败问题求助

问题核心 #

使用ng build --localize构建多语言包后，访问de/或en/路由时，资源请求路径为/assets/images/xxx，缺少locale前缀，导致404。而实际资源已被打包到<locale>/assets/目录下，手动输入带前缀的路径可正常访问。

解决方案 #

1. 修正模板中的资源引用路径 #

避免使用绝对根路径，改用相对路径，让Angular自动根据当前路由的baseHref拼接完整路径：

<!-- 错误写法（绝对路径） -->
<img src="/assets/images/logo.png" alt="Logo">
<!-- 正确写法（相对路径） -->
<img src="./assets/images/logo.png" alt="Logo">

2. 确认angular.json的assets配置 #

确保assets路径配置正确，构建时会将资源复制到每个locale的子目录下：

"assets": [
  "./public/assets"
],

注：根据你的项目目录结构调整路径，确保构建完成后，dist/frontend/browser/de/和dist/frontend/browser/en/目录下都存在assets文件夹及对应资源。

3. 动态注入APP_BASE_HREF处理路径（可选） #

如果需要在组件中动态生成资源路径，可注入APP_BASE_HREF来拼接：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(@Inject(APP_BASE_HREF) private baseHref: string) {}

  getAssetUrl(assetPath: string): string {
    return `${this.baseHref}/${assetPath}`;
  }
}

模板中使用：

<img [src]="getAssetUrl('assets/images/logo.png')" alt="Logo">

4. 调整服务启动命令 #

使用serve启动dist目录时，添加--single参数支持SPA路由，确保资源请求路径正确：

serve ./dist/frontend/browser --single

验证步骤 #

1. 执行ng build --localize，检查dist/frontend/browser/de/assets/和dist/frontend/browser/en/assets/目录，确认资源已复制到位。
2. 启动服务后访问/de/或/en/，查看网络请求，确认资源路径已带上locale前缀。

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