ng-xmui-datatables Can not compile using --aot

Hey I was trying to integrate this library in my Angular project, but got the following error:

Unexpected value 'NgxMuiDatatablesModule in /Users/.../node_modules/ngx-mui-datatables/ngx-mui-datatables.d.ts' imported by the module 'AppModule in /Users/.../src/app/app.module.ts'. Please add a @NgModule annotation.

The module was originally imported in app.module.ts, and the package was installed via npm.

I'm using Angular 8.2.1 And the library which I imported is: 0.0.10 as the lateset version I believe.

I have tried many different ways suggested by others on Github, but it was not related to this specific package, although the compilation error is similar: Unexpected value... Please add a @NgModule annotation.

Here is my app.module.ts:

Again, the module was originally imported here, but I was exploring different solutions, so you'll see a duplicate import in my flight-management.module.ts, but it shouldn't be the problem, since I have tested by removing the import from 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 {}


The datatable module is used in several components, so I'm posting one of them for information.

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>


flight-management.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 {}


My app works fine in dev environment, using default --jit compile mode, but fails using --aot specifically. Also, it fails to deploy to prod environment, which is by default using --aot.

I know there's a workaround to disable aot and compileOptimizer when ng build prod, but I am hoping there's an actual solution to this problem. Since disabling ahead-of-time and optimizer greatly increases the build time.

Any help is appreciated!

Continue reading...