NgxMuiDatatables 无法使用 --aot 编译

Posted 2023-02-22

【中文标题】NgxMuiDatatables 无法使用 --aot 编译

【英文标题】：NgxMuiDatatables Can not compile using --aot

【发布时间】：2020-01-10 19:37:11

【问题描述】：

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

/Users/.../src/app 中的模块“AppModule”导入的意外值“/Users/.../node_modules/ngx-mui-datatables/ngx-mui-datatables.d.ts 中的 NgxMuiDatatablesModule” /app.module.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 

datatable 模块在多个组件中使用，因此我发布其中一个以供参考。

flight-management.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，但我希望有一个实际的解决方案来解决这个问题。 由于提前禁用和优化器会大大增加构建时间。

感谢任何帮助！

【参考方案1】：

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

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

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

【讨论】：

谢谢，我认为它最初的样子 - 在我的 FlightManagementModule 中导入 NgxMuiDatatablesModule，但这似乎不起作用，因为我说我正在探索不同的选项，所以我后来改变了它，但仍然没有运气。