0

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!

4

1 回答 1

0

您应该导入NgxMuiDatatablesModule并FlightManagementModule删除MuiDatatablesComponent.

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

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

于 2019-09-09T02:42:23.507 回答