AngularJS迁移Angular引入第三方库编译报错：需设置sourceType: module

嗨，我明白你在从AngularJS迁移到Angular时碰到的这个编译问题了——那个ParseError本质是因为你的构建工具（Gulp）没把生成的.shim.ngstyle.js文件当作ES模块来处理，Angular的TS编译器也没正确识别这类文件的模块语法。下面是一步步的解决方案：

1. 调整Gulp任务的模块处理规则 #

你的Gulp任务生成的jquery.dataTables.css.shim.ngstyle.js用了ES模块的export语法，但Gulp默认的编译环境可能没开启sourceType: module模式。你需要修改对应的Gulp任务配置：

• 如果是用第三方插件生成这个shim文件，检查插件文档，有没有选项可以指定输出为ES模块；
• 如果是用Babel转译这个文件，在Babel配置里加上sourceType: "module"，示例代码如下：

// gulpfile.js 中的相关处理片段
.pipe(babel({
  sourceType: "module",
  presets: ['@babel/preset-env']
}))

2. 修正TypeScript配置文件 #

打开项目根目录的tsconfig.json，确保这些shim文件能被TS编译器正确识别：

• 在compilerOptions里开启allowJs: true，允许TS处理JS文件；
• 将moduleResolution设置为node，让TS采用Node.js的模块解析规则；
• 在include数组中添加shim文件的路径，避免TS忽略它：

"include": [
  "src/**/*",
  "node_modules/datatables.net-dt/css/*.shim.ngstyle.js"
]

3. 换用Angular推荐的第三方资源引入方式 #

其实你完全可以绕开手动导入shim文件的麻烦，用Angular官方推荐的方式引入样式：

• 打开angular.json，找到projects -> [你的项目名称] -> architect -> build -> options -> styles数组，直接添加datatables的CSS路径：

"styles": [
  "src/styles.css",
  "node_modules/datatables.net-dt/css/jquery.dataTables.css"
]

• 如果你用的是Angular封装的datatables库（比如@angular-datatables），记得先正确安装依赖，然后在app.module.ts里导入对应的模块：

import { DataTablesModule } from '@angular-datatables';

@NgModule({
  imports: [
    // 其他已导入的模块
    DataTablesModule
  ]
})
export class AppModule { }

4. 清理缓存并重新构建 #

完成以上调整后，建议清理一下构建缓存，避免旧配置干扰：

• 执行npm cache clean --force（或yarn cache clean）清除npm/yarn缓存；
• 删除node_modules和dist文件夹，然后重新执行npm install和ng build。

这些操作应该能解决你遇到的ParseError问题，核心就是让构建工具把包含ES模块语法的文件当作模块处理，同时遵循Angular的资源引入规范。

内容的提问来源于stack exchange，提问作者Fostiné Samuel