Angular微前端翻译文件读取异常及相关实现细节咨询

1. CustomLoader类的存放位置及调用方式 #

• 存放位置：一般放在主应用的src/app/core/i18n目录下（也可根据项目结构调整，比如单独的i18n模块文件夹），和其他国际化相关代码归置在一起，便于维护。
• 调用方式：在主应用的app.module.ts（或专门的国际化模块）中，配置TranslateModule时指定使用该自定义加载器，示例代码如下：

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: CustomLoader
      }
    })
  ]
})
export class AppModule {}

若涉及懒加载模块，需在对应模块中导入TranslateModule.forChild()并复用该加载器配置。

2. ${this.url}/microfrontend1Assets的含义及代理配置原因 #

• this.url指的是代理配置中指向的微前端应用运行地址，也就是http://localhost:4201。
• microfrontend1Assets不是微前端原生的assets文件夹，而是主应用通过代理规则映射的虚拟路径，目的是区分主应用自身静态资源与微前端静态资源，避免路径冲突。
• 配置target: "http://localhost:4201"是为了解决跨域问题：浏览器同源策略会阻止主应用直接访问不同端口的微前端资源，通过代理转发请求，就能绕过同源限制获取微前端的翻译文件等静态资源。

3. proxy.conf.json中target: "http://localhost:4201"的归属 #

该配置属于主应用。主应用启动时会加载此代理规则，当主应用请求/microfrontend1Assets这类路径时，会自动将请求转发到http://localhost:4201（微前端的运行地址），从而获取微前端的翻译文件。

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