如何在Angular 5（CLI）项目中导入并使用原生JavaScript文件

我太懂你折腾好几个小时却卡壳的烦躁了，针对你遇到的TS6143和TS5055编译错误，下面是一步步落地的解决方案，完美适配你的场景：

核心问题拆解 #

你之前踩的坑根源在于：

• 把原生JS文件放在了src目录下，TypeScript编译器会自动把它纳入编译流程，开启allowJs: true后，编译器会尝试将JS文件输出到outDir，直接和原文件冲突（也就是TS5055错误的原因）。
• 尝试用import导入无类型定义的原生JS文件，又没匹配正确的编译规则，引发了TS6143错误。

具体操作步骤 #

1. 迁移JS文件到静态资源目录 #

Angular CLI默认的静态资源目录是src/assets，把你的Xcelcious.Common.js移动到这个文件夹里。这样TypeScript编译器会自动忽略它，不会把它当作编译输入文件，从根源避免文件覆盖问题。

2. 在index.html中正确引入JS文件 #

修改index.html里的script标签，路径指向assets目录下的文件：

<script type="text/javascript" src="assets/Xcelcious.Common.js"></script>

3. 在组件中声明全局变量并调用功能 #

不需要用import语句，只需要在要使用该库的组件（比如home.component.ts）顶部添加TypeScript的全局变量声明，告诉编译器这个全局变量是存在的：

// home.component.ts
declare let Xcelcious: any;

@Component({
  // 你的组件元数据
})
export class HomeComponent {
  // 调用库功能的示例方法
  capturePhotoFromCamera() {
    Xcelcious.Camera.PhotoFromCamera(
      (imageData) => {
        console.log("照片获取成功：", imageData);
        // 在这里处理返回的图片数据
      },
      (error) => {
        console.error("拍照失败：", error);
      }
    );
  }
}

4. 调整tsconfig.json（可选但推荐） #

把tsconfig.json里的"allowJs": true移除或者设为false，因为我们已经用全局引入的方式，不需要让TypeScript编译JS文件了，这样可以避免不必要的编译警告。修改后的compilerOptions部分：

"compilerOptions": {
  "outDir": "./dist/out-tsc",
  "allowJs": false, // 改回false或者直接删除这一行
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2017", "dom"
  ]
}

5. 验证运行 #

重启ng serve，测试组件中的功能调用，你会发现之前的编译错误全部消失，库的功能可以正常使用了。

方案为什么有效？ #

• 把JS文件放在assets目录下，Angular会直接把它复制到打包后的dist/assets目录，不会经过TypeScript编译流程，彻底避免了文件覆盖和编译规则冲突。
• 使用declare let告诉TypeScript全局变量的存在，既满足了TypeScript的类型检查要求，又不需要为无类型定义的库编写复杂的类型声明文件，是这类场景下最轻量化的解决方案。

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