Question

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

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

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

我正在使用Angular 8.2.1 我导入的库是：0.0.10是我认为的最新版本。

我尝试了Github上其他人建议的许多不同方法，但与该特定程序包无关，尽管编译错误类似：意外值...请添加@NgModule批注。

这是我的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>

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 {}

我的应用在开发环境中使用默认的--jit编译模式可以正常工作，但专门使用--aot失败。而且，它无法部署到产品环境，默认情况下使用--aot。

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

感谢您的帮助！

Answer 1

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

由于您在模块中使用了schemas: [ CUSTOM_ELEMENTS_SCHEMA ]，因此在开发环境中效果很好。

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

NgxMuiDatatables无法使用--aot进行编译

1 个答案: