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

Posted 2023-05-07

【中文标题】模块“AppModule”导入的意外值“DataTablesModule”。请添加@NgModule 注释

【英文标题】：Unexpected value 'DataTablesModule' imported by the module 'AppModule'. Please add a @NgModule annotation

【发布时间】：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文件夹

【参考方案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