Angular 14与Module Federation中如何正确使用import.meta.resolve？

一、先处理"Cannot invoke an object which is possibly 'undefined'"编译错误 #

这个错误来自TypeScript的类型检查——默认类型定义中import.meta.resolve被标记为可能未定义（并非所有JS环境都支持该API），你可以通过以下两种方式解决：

方式1：使用非空断言（简单直接） #

如果你确认当前运行环境（浏览器+Webpack）支持import.meta.resolve，可以直接添加非空断言符!跳过类型检查：

public init() {
    const absolutePath = import.meta.resolve!('./settings.json');
}

方式2：补充类型声明（更规范） #

在项目src目录下创建env.d.ts文件，手动扩展ImportMeta接口，明确resolve方法的类型：

interface ImportMeta {
  resolve: (specifier: string) => string;
}

保存后TypeScript会自动识别该声明，不再抛出类型错误。

二、确保返回http开头的绝对路径 #

要让import.meta.resolve输出以http://开头的完整绝对路径，需要在Webpack配置中正确设置publicPath：
修改远程应用的webpack.config.js，添加output.publicPath配置，值为你的远程应用实际部署的绝对地址：

module.exports = withModuleFederationPlugin({
  name: 'my-app',
  exposes: {
    './home':'./src/app/my-module/products.module.ts'
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
  output: {
    publicPath: 'http://your-remote-app-domain/' // 替换为实际部署地址
  }
});

三、替代方案：用new URL结合import.meta.url（更兼容） #

如果不想处理import.meta.resolve的类型问题，也可以使用new URL API获取绝对路径，这种方式TypeScript原生支持，无需额外配置：

public init() {
    const absolutePath = new URL('./settings.json', import.meta.url).href;
}

该方法会基于当前模块的URL（import.meta.url）解析相对路径，最终返回完整的绝对URL。

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