Angular 11应用导入.js后缀文件无法编译问题如何解决

• 第一步：修改tsconfig.json配置，在compilerOptions节点下新增3个配置项：

"compilerOptions": {
  // 原有配置全部保留，新增以下内容
  "allowJs": true, // 允许TypeScript编译器处理JS格式文件
  "allowSyntheticDefaultImports": true, // 兼容ES模块默认导入语法
  "checkJs": false // 关闭对JS文件的类型检查，避免非TS标准语法报错
}

• 第二步：如果JS文件存放路径不在默认的src目录下（比如是node_modules内的第三方依赖），需要在tsconfig.json根节点新增include配置，把JS文件所在路径加入编译范围：

{
  // 原有配置全部保留，新增以下内容
  "include": [
    "src/**/*",
    "你存放JS文件的实际路径/**/*.js"
  ]
}

• 第三步：修正组件内的导入语法，你当前使用的全量导入语法不匹配JS文件的默认导出规则，修改为：

// 本地同目录下的JS文件可以带上.js后缀，避免模块识别错误
import SelectorPack from './test.js'

constructor() {  
  console.log(SelectorPack)
  // 可直接调用该方法
  SelectorPack({}, {tools: ['alpha', 'beta']})
}

• 可选补充配置：如果仍提示模块找不到，可在src目录下新建global.d.ts声明文件，写入以下内容全局声明JS模块的类型：

declare module '*.js' {
  const value: any;
  export default value;
}

完成以上配置后重新启动Angular服务，即可正常编译运行导入的JS代码。

内容的提问来源于stack exchange，提问作者Alaksandar Jesus Gene