Angular中如何导入node_modules内的ES模块JS文件？

三种尝试失败的原因 #

1. index.html直接引入：Angular 开发服务器不会把 node_modules 目录直接暴露给浏览器，浏览器请求该路径时服务器找不到对应资源——构建工具仅处理 src 下的文件，node_modules 作为内部依赖目录，无法通过浏览器URL直接访问。
2. angular.json scripts 数组引入：该配置针对非模块化脚本（如IIFE、UMD格式）设计，而你的 all.js 是ESM模块，使用了import/export语法，浏览器将其当作普通脚本执行时，就会触发“不能在模块外使用import”的语法错误。
3. polyfills引入：polyfills用于补全浏览器兼容特性，并非加载业务模块的场景，即便引入也无法直接调用模块内的导出方法，因为polyfills不会主动暴露全局变量。

正确解决方案 #

方法一：在组件/服务中直接导入（推荐） #

既然这是ESM模块，Angular的Webpack构建工具可直接处理，在需要用到的文件中导入即可：

// 示例：在 app.component.ts 中引入
import { initAll, Header } from '@id-sk/frontend/govuk/all';

ngOnInit() {
  // 调用初始化方法，可选传入配置参数
  initAll({
    // 可选：指定初始化作用域，默认是整个document
    // scope: document.getElementById('target-section')
  });

  // 也可单独实例化Header组件
  const toggleBtn = document.querySelector('[data-module="govuk-header"]');
  if (toggleBtn) {
    new Header(toggleBtn).init();
  }
}

Webpack会自动处理模块的所有依赖（如./extended、./components/header/header等文件），打包到最终代码中，不会出现路径问题。

方法二：全局引入（仅当必须全局可用时使用） #

若需要让包内方法在全局范围访问，可按以下步骤操作：

1. 在 src 目录下新建 scripts/global-govuk.js 文件，内容如下：

import { initAll, Header } from '@id-sk/frontend/govuk/all';

// 将方法挂载到window对象，实现全局访问
window.GovUkFrontend = {
  initAll,
  Header
};

2. 修改 angular.json 的 scripts 配置，添加该文件并指定类型为模块：

"scripts": [
  {
    "input": "src/scripts/global-govuk.js",
    "type": "module"
  }
]

3. 在组件中使用时，先声明全局变量再调用：

declare var GovUkFrontend: any;

ngOnInit() {
  GovUkFrontend.initAll();
}

注意事项 #

• 确保Angular版本在8及以上，这类版本对ESM模块的支持较为完善
• 导入时务必使用npm包路径（@id-sk/frontend/govuk/all），不要写相对路径指向node_modules，否则构建工具可能无法正确解析依赖。

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