模块“AppModule”导入的意外值“DataTablesModule”。请添加@NgModule 注释答案

【问题标题】：Unexpected value 'DataTablesModule' imported by the module 'AppModule'. Please add a @NgModule annotation模块“AppModule”导入的意外值“DataTablesModule”。请添加@NgModule 注释
【发布时间】：2018-01-10 03:23:09
【问题描述】：

我是 Angular 数据表的新手，我正在尝试按照链接 https://l-lin.github.io/angular-datatables/#/getting-started 中给出的说明来实现 Angular 数据表

按照说明尝试使用 Angular CLI 运行应用程序后，我收到未捕获的错误：模块“AppModule”导入的意外值“DataTablesModule”。请添加@NgModule 注解。

注意：我在 app.module.ts 中添加了 DataTablesModule，如下所示

import { ActionComponent } from './action/action.component';
import { SearchfilterPipe } from './search/searchfilter.pipe';
import { DataTablesModule } from 'angular-datatables';

@NgModule({
declarations: [
AppComponent,
routingComponents,
LicenseComponent,
HeaderComponent,
ActionComponent,
FooterComponent,
SearchfilterPipe

],
imports: [
BrowserModule,
HttpModule,
FormsModule,
DataTablesModule,
AppRoutingModule,
NgbModule.forRoot()
],
providers: [HttpModule],
bootstrap: [AppComponent]
})
export class AppModule { }

在 .angular-cli.json 中我添加了以下代码

{
"apps": [
{
  ...
  "styles": [
    "../node_modules/datatables.net-dt/css/jquery.dataTables.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/datatables.net/js/jquery.dataTables.js"
  ],
  ...
 }
 ]
 }

我正在使用以下提供的版本。

@angular/cli: 1.1.0
节点：8.0.0
@angular/编译器：4.2.3
@角/核心：4.2.6
@angular/compiler-cli: 4.2.3

不明白为什么我的应用程序会崩溃。任何输入/建议都将受到高度赞赏。

【问题讨论】：

你能出示你的代码吗？
添加了代码。
angular-datatables 包括node_modules 文件夹。这就是您收到此错误的原因。我会说这是一个错误
那么更好的解决方案是什么？
尝试删除node_modules/angular/datatables/node_modules文件夹

标签： angular datatables

【解决方案1】：

首先修改你的tsconfig.json并在里面添加这个块

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
     ]
    }
  }
}

接下来，angular-datatables 实际上会安装一个版本的node_modules 并在其中包含@angular 的副本，这会导致角度版本之间发生冲突，因此只需从angular-datatables 文件夹中删除node_modules 即可很好走。

【讨论】：

感谢您的回答。这对我有用，但这是一个令人讨厌的解决方案。当我尝试在我的 docker 容器上执行此操作时，我无法想象这对我来说会有多糟糕

【解决方案2】：

可以在aot中运行

ng serve --aot

或使用 --preserve-links 选项

ng serve --preserve-symlinks

【讨论】：