Angular-4-data-table执行ng serve时编译报错，求问题原因及解决办法

我之前也碰到过类似的问题，结合你的环境（Angular CLI 1.6.2 + Node 6.11.2），这个错误的核心原因是Angular CLI默认不会编译node_modules目录下的TypeScript源码文件，而angular-4-data-table可能只发布了未编译的TS源码，没有提供预编译后的dist包，导致CLI无法识别它的输出文件。

下面是具体的原因分析和解决方案：

可能的原因 #

• 库未预编译：angular-4-data-table的npm包只包含src目录下的TS源码，没有提前编译成浏览器可识别的JS文件。Angular CLI的构建流程默认会跳过node_modules里的TS文件编译，所以会报“不是编译输出的一部分”的错误。
• CLI配置限制：旧版本的Angular CLI（1.6.x属于较早期版本）对node_modules的编译规则比较严格，没有自动处理这类未预编译的第三方库。
• 版本兼容性：angular-4-data-table是针对Angular 4开发的，而Angular CLI 1.6.2通常对应Angular 5版本，可能存在细微的版本适配问题，间接导致编译异常。

解决方案 #

方案1：修改Angular CLI配置，让CLI编译该库的源码 #

1. 打开项目根目录下的.angular-cli.json文件（注意是旧版本的配置文件，不是后来的angular.json）。
2. 在apps数组的对应项目配置中，找到tsConfig字段，它指向项目的tsconfig.json路径。
3. 打开tsconfig.json，在include数组中添加node_modules/angular-4-data-table/src/**/*.ts，告诉TypeScript编译器需要编译这个库的源码：

{
  "include": [
    "src/**/*.ts",
    "node_modules/angular-4-data-table/src/**/*.ts"
  ]
}

4. 同时，在.angular-cli.json的apps[0]中确保存在vendorChunk: true（如果没有的话添加进去），确保第三方库被打包到vendor chunk中：

"apps": [
  {
    ...
    "vendorChunk": true,
    ...
  }
]

5. 重启ng serve，检查编译是否正常。

方案2：替换为预编译的替代库 #

如果上述方案无效，可能是angular-4-data-table的维护状态不佳（毕竟是针对Angular 4的旧库），可以考虑替换为更活跃的替代库，比如@swimlane/ngx-datatable，它是预编译好的，兼容Angular 5+，且功能更完善。

方案3：手动编译该库并引用 #

1. 进入node_modules/angular-4-data-table目录，执行npm install和npm run build（如果库的package.json里有build脚本），生成dist目录。
2. 在项目代码中修改导入路径，从import { ... } from 'angular-4-data-table'改为import { ... } from 'angular-4-data-table/dist'，直接引用编译后的文件。

额外提示 #

因为你使用的Node 6.11.2和Angular CLI 1.6.2都是比较旧的版本，长期来看建议逐步升级到更稳定的版本（比如Node 8+和Angular CLI 6+），这样能减少这类兼容性问题。

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