在npm库中实现带可配置路径的Async Import（Angular i18n）

问题核心是：当代码抽离到npm库后，import()的路径会相对于库在node_modules中的位置解析，而非使用库的应用目录，导致传入的应用内路径无法被正确识别。以下是几种可行的解决方法：

方案1：基于应用根目录构建绝对路径 #

利用Angular提供的APP_BASE_HREF令牌，构建从应用根目录出发的绝对路径，确保路径解析锚点是应用而非库。

库侧代码示例：

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

@Injectable()
export class I18nLoaderService {
  constructor(@Optional() @Inject(APP_BASE_HREF) private baseHref: string) {}

  async loadTranslations(lang: string, relativePath: string) {
    // 处理重复斜杠，确保路径格式正确
    const fullPath = `${this.baseHref || ''}/${relativePath}/messages.${lang}.json`.replace(/\/+/g, '/');
    const translationsModule = await import(fullPath);
    loadTranslations(translationsModule.default.translations);
  }
}

应用侧使用时，传入相对于应用根目录的路径（比如i18n，对应apps/my-app/i18n目录）即可。

方案2：借助Webpack的require.context传递上下文 #

让应用侧提供一个Webpack上下文，库通过这个上下文加载翻译文件，这种方式能让Webpack在打包阶段就正确识别文件位置。

应用侧代码：

// 创建指向i18n目录的上下文
const localesContext = require.context('./i18n', false, /messages\.[a-z]+\.json$/);

// 传递给库的加载服务
i18nLoader.loadWithContext('en', localesContext);

库侧代码：

async loadWithContext(lang: string, context: __WebpackModuleApi.RequireContext) {
  const translationsModule = context(`./messages.${lang}.json`);
  loadTranslations(translationsModule.default.translations);
}

方案3：将i18n目录配置为应用资产 #

先确保应用的i18n目录被标记为assets，这样构建时文件会被复制到dist目录的根路径下，库可以直接通过根相对路径访问。

修改应用的angular.json：

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/i18n" // 加入i18n目录到资产列表
            ]
          }
        }
      }
    }
  }
}

库侧直接使用根相对路径加载：

async loadTranslations(lang: string) {
  const translationsModule = await import(`/i18n/messages.${lang}.json`);
  loadTranslations(translationsModule.default.translations);
}

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