angular - NgxMuiDatatables 无法使用 --aot 编译

Question

嘿，我试图将此库集成到我的 Angular 项目中，但出现以下错误:

/Users/.../node_modules/ngx-mui-datatables/ngx-mui-datatables.d.ts 中的模块“AppModule”导入的意外值“NgxMuiDatatablesModule in/Users/.../src/app/app.模块.ts'。请添加 @NgModule 注释。

该模块最初是在 app.module.ts 中导入的，并且该包是通过 npm 安装的。

我正在使用 Angular 8.2.1
我导入的库是:0.0.10 作为我相信的最新版本。

我在 Github 上尝试了很多其他人建议的不同方式，但它与这个特定的包无关，虽然编译错误类似:Unexpected value... Please add a @NgModule annotation。

这是我的 app.module.ts:

同样，该模块最初是在此处导入的，但我正在探索不同的解决方案，因此您会在我的 flight-management.module.ts 中看到重复导入，但这应该不是问题，因为我已经通过删除从 app.module 导入。

... other imports omitted
import { NgxMuiDatatablesModule } from 'ngx-mui-datatables';

@NgModule( {
    declarations: [
        AppComponent,
        HeaderComponent,
        SidenavComponent,
        WelcomeComponent,
        LoginDialog,
        ResetPasswordComponent,
        AircraftRegisterComponent,
        AircraftFleetComponent,
        // FlightManagementComponent,
        // RouteManagementComponent,
        FlightRegisterComponent,
        FlightChangeDialog,
        ConfirmDialog,
        Error401Component,
        Error404Component,
        InputNumberOnlyDirective
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CustomStyleModule,
        RouterModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        FlightManagementModule,
        RouteManagementModule,
        NgxMuiDatatablesModule
    ],
    // schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    providers: [],
    bootstrap: [ AppComponent ],
    entryComponents: [ LoginDialog, FlightChangeDialog, ConfirmDialog ]
} )
export class AppModule {}

数据表模块用于多个组件，因此我发布其中一个以供引用。

飞行管理.component.html:

<div class="container">
    <div class="ngx-datatable-container" fxLayout="column" fxLayoutAlign="center center">
        <ngx-mui-datatable title="Flight List" [data]="dataSource" [columns]="columns"
                           [options]="options"></ngx-mui-datatable>
    </div>
</div>

飞行管理.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule }                     from '@angular/common';
import { FlightManagementComponent }        from './flight-management.component';
import { MuiDatatablesComponent }           from 'ngx-mui-datatables/ngx-mui-datatables';

@NgModule( {
    declarations: [ FlightManagementComponent, MuiDatatablesComponent ],
    exports: [ FlightManagementComponent ],
    imports: [ CommonModule ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class FlightManagementModule {}

我的应用程序在开发环境中运行良好，使用默认的 --jit 编译模式，但特别是使用 --aot 失败。此外，它无法部署到 prod 环境，默认情况下使用 --aot。

我知道有一种解决方法可以在 ng build prod 时禁用 aot 和 compileOptimizer，但我希望有一个实际的解决方案来解决这个问题。
由于提前禁用和优化器会大大增加构建时间。

任何帮助表示赞赏!

Answer 1

您应该导入 NgxMuiDatatablesModule在 FlightManagementModule并删除 MuiDatatablesComponent 的声明.

它在开发环境中运行良好，因为您使用了 schemas: [ CUSTOM_ELEMENTS_SCHEMA ]在模块中。

删除它时，开发环境也应该有错误。