Angular中实现TypeScript模块动态加载无需重复构建的方案咨询

方案1：拆分包为纯类型包+轻量加载器 #

• 将原TS模块拆分为两个独立npm包：
  • 纯类型包：仅包含.d.ts类型定义文件，作为开发依赖(devDependency)安装到Angular项目中，仅用于编译期类型校验，不会被打包进Angular生产产物
  • 轻量加载器包：仅包含远程JS实现的加载逻辑，作为生产依赖安装到Angular项目，打包时仅会将少量加载逻辑打入最终产物
• JS实现代码单独打包后托管在内部HTTP服务，每次逻辑更新只需替换托管的JS文件，无需修改Angular项目代码或重新构建

方案2：UMD格式打包+动态脚本加载 #

• 将TS模块的实现代码打包为UMD格式，打包时配置全局导出变量（例如window.MyCustomModule），托管该UMD文件到内部HTTP服务
• Angular项目中写入动态脚本加载逻辑，运行时动态插入script标签拉取最新的UMD代码，加载完成后从全局变量获取实现实例，全程复用提前安装的纯类型包做类型校验，完全符合TS语法规范

示例代码：

// 动态加载逻辑
async function loadCustomModule(): Promise<typeof import('@internal/custom-module-type')> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    // 生产环境可替换为带文件哈希的地址，避免缓存问题
    script.src = 'http://内部托管地址/custom-module/latest.js';
    script.onload = () => resolve(window.MyCustomModule);
    script.onerror = () => reject(new Error('模块加载失败'));
    document.body.appendChild(script);
  });
}

// 业务侧调用
const moduleInstance = await loadCustomModule();
// 此处有完整TS类型提示
moduleInstance.yourMethod(params);

方案3：模块联邦（Module Federation）实现运行时加载 #

• 若你的Angular项目使用Angular 14+版本，可直接使用官方支持的模块联邦能力，将TS模块配置为远程模块，对外暴露需要调用的方法与实例
• Angular宿主项目配置远程模块的托管地址，运行时自动拉取最新的远程模块代码，类型定义同样单独作为开发依赖安装，保证编译期类型校验正常

注意事项 #

• 所有方案的前提是更新JS实现时不修改对外暴露的接口定义，保证类型定义与运行时实现完全兼容
• 托管JS实现的HTTP服务需要配置合理的缓存策略，建议设置Cache-Control: no-cache，或使用文件内容哈希作为文件名，避免客户端加载旧版本缓存代码

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