升级 Angular 9 后，共享模块的导入在共享组件中不起作用

Question

我已将我的项目升级到以下版本

节点从 11 -> 12 角度从 8 -> 9

应用开始抛出编译时错误。应用程序有很多共享组件，它们在 SharedModule 的声明数组和导出数组下声明

我们使用primeng、aggrid并在一个共享模块中导入和导出它们的所有必要模块。并且在App模块中导入了Shared模块。

我的共享模块在下面

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AgGridModule } from "ag-grid-angular";

// Import PrimeNG components.
import { PanelModule } from 'primeng/components/panel/panel';
import { DialogModule } from 'primeng/components/dialog/dialog';
import { ButtonModule } from 'primeng/components/button/button';
import { ToolbarModule } from 'primeng/components/toolbar/toolbar';
import { ConfirmationService } from 'primeng/components/common/api';
import { DropdownModule } from 'primeng/components/dropdown/dropdown';
import { CalendarModule } from 'primeng/components/calendar/calendar';
import { InputSwitchModule } from 'primeng/components/inputswitch/inputswitch';
import { AutoCompleteModule } from 'primeng/components/autocomplete/autocomplete';
import { ConfirmDialogModule } from 'primeng/components/confirmdialog/confirmdialog';
import { TriStateCheckboxModule } from 'primeng/components/tristatecheckbox/tristatecheckbox';
import { RadioButtonModule } from "primeng/components/radiobutton/radiobutton";
import { TabViewModule } from 'primeng/components/tabview/tabview';
import { BlockUIModule } from 'primeng/components/blockui/blockui';
import { OverlayPanelModule } from 'primeng/components/overlaypanel/overlaypanel';
import { ModalModule } from 'ngx-bootstrap/modal';
import { KeyFilterModule } from 'primeng/components/keyfilter/keyfilter';
import { InputMaskModule } from "primeng/components/inputmask/inputmask";
import { CheckboxModule } from 'primeng/checkbox';
import { SplitButtonModule } from 'primeng/splitbutton';

// Custom modules.
import { AppToolbarComponent } from './app-toolbar/app-toolbar.component';
import { AuditDetailsComponent } from './audit-details/audit-details.component';
import { PgridComponent } from './grid/p-grid.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { DatePickerComponent } from './app-datepicker/app-datepicker.component';
import { SearchWellComponent } from './search-well/search-well.component';
import { ShowDialogComponent } from "./show-dialog/show-dialog.component";
import { CancelComponent } from './app-cancel/app-cancel.component';
import { iFrameComponent } from "./iframe/iframe.component";

import { InfiniteScrollModule } from 'ngx-infinite-scroll';

// import custom service;
import { DropdownService } from '../services/dropdown/dropdown.service';
import { PgridService } from '../services/p-grid.service';
import { SearchWellService } from './search-well/search-well.service';
//import { FileuploadComponent } from "./fileupload/fileupload.component";
import { FileUploadModule } from "primeng/components/fileupload/fileupload";
import { FileuploadService } from "../services/fileupload.service";

// import custom pipe; 
import { OrderByPipe } from "./pipes/orderby.pipe";

//custom directives
import { MatchHeightDirective } from './directives/match-height.directive';
import { KeyboardCtrlDirective } from './directives/keyboard-control.directive';
import { SpinnerComponent } from './app-spinner/app-spinner.component';
import { CollapseDirective } from "./collapse.directive";
import { CarotComponent } from './app-carot/app-carot.component';
import { sideMenuHeightDirective } from './directives/side-menu-height.directive';
import { AutoresizeDirective } from "./directives/auto-resize.directive";
import { SearchComponent } from "./search/search.component";
import { InputTextModule } from "primeng/components/inputtext/inputtext";
import { FieldTooltipDirective } from "./directives/field-tooltip.directive";
import { TooltipModule } from "primeng/components/tooltip/tooltip";
import { TooltipService } from "./directives/tooltip.service";
import { TooltipResolver } from "./resolver/tooltip.resolver";
import { RecordUsageResolver } from './resolver/record-usage.resolver';
import { InfiniteScrollerDirective } from './directives/infinite-scroll.directive';
import { SimpleDropdownComponent } from './simple-dropdown/simple-dropdown.component';
import { CheckboxComponent } from './checkbox/checkbox.component';
import { TimeComponent } from './time/time.component';


import { DuplicateComponent } from "./app-duplicate/app-duplicate.component";
import { CardFilterComponent } from './card-filter/card-filter.component';
import { AppExcelExportComponent } from './app-excel-export/app-excel-export.component';

//Decorators
import { ConfirmationDialogDirective } from './directives/confirmation-dialog.directive';
import { PrimengDatePickerDecorator } from './directives/date-picker-decorator';

/*
 * App Ag-grid imports
 */
import { AppAgGridComponent } from './app-ag-grid/app-ag-grid.component';
import { AgGridTmplRendererComponent } from './app-ag-grid/ag-grid-tmpl-renderer/ag-grid-tmpl-renderer.component';
import { AgGridTmplEditorComponent } from './app-ag-grid/ag-grid-tmpl-editor/ag-grid-tmpl-editor.component';
import { AgGridTextFilter } from './app-ag-grid/ag-grid-custom-filters/ag-grid-text-filter.component';
import { AgGridCustomHeader } from './app-ag-grid/ag-grid-custom-header/ag-grid-custom-header.component';
import { AgGridDetailTmplEditorComponent } from './app-ag-grid/ag-grid-detail-tmpl-editor/ag-grid-detail-tmpl-editor.component';
import { AgGridNumberFilter } from './app-ag-grid/ag-grid-custom-filters/ag-grid-number-filter.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    FileUploadModule,
    PanelModule,
    DialogModule, 
    ButtonModule,
    ToolbarModule,
    DropdownModule,
    CalendarModule,
    InputSwitchModule,
    AutoCompleteModule,
    ConfirmDialogModule,
    TriStateCheckboxModule,
    CheckboxModule,
    RadioButtonModule,
    TabViewModule,
    BlockUIModule,
    OverlayPanelModule,
    KeyFilterModule,
    InputTextModule,
    TooltipModule,
    InputMaskModule,
    SplitButtonModule,
    ModalModule.forRoot(),
      AgGridModule.withComponents([AgGridTmplRendererComponent, AgGridTmplEditorComponent, AgGridDetailTmplEditorComponent, AgGridTextFilter, AgGridCustomHeader, AgGridNumberFilter])
  ],

  declarations: [
    AppToolbarComponent,
    AuditDetailsComponent,
    PgridComponent,
    DropdownComponent,
    //FileuploadComponent,
    DatePickerComponent,
    SearchWellComponent,
    ShowDialogComponent,
    CancelComponent,
    SpinnerComponent,
    CarotComponent,
    OrderByPipe,
    MatchHeightDirective,
    KeyboardCtrlDirective,
    sideMenuHeightDirective,
    InfiniteScrollerDirective,
    CollapseDirective,
    AutoresizeDirective,
    iFrameComponent,
    SearchComponent,
    FieldTooltipDirective,
    SimpleDropdownComponent,
    CheckboxComponent,
    TimeComponent,
    DuplicateComponent,
    CardFilterComponent,
    AppExcelExportComponent,
    ConfirmationDialogDirective,
    AppAgGridComponent,
    AgGridTmplRendererComponent,
    AgGridTmplEditorComponent,
    AgGridTextFilter,
    AgGridCustomHeader,
    AgGridDetailTmplEditorComponent,
    AgGridNumberFilter,
    PrimengDatePickerDecorator
  ],
  
  exports: [
    CommonModule,
    FormsModule,
    FileUploadModule,
    AgGridModule,
    PanelModule,
    DialogModule, 
    ButtonModule,
    ToolbarModule,
    DropdownModule,
    CalendarModule,
    InputSwitchModule,
    AutoCompleteModule,
    ConfirmDialogModule,
    TriStateCheckboxModule,
    CheckboxModule,
    RadioButtonModule,
    TabViewModule,
    BlockUIModule,
    OverlayPanelModule,
    KeyFilterModule,
    InputTextModule,
    TooltipModule,
    InputMaskModule,
    InfiniteScrollerDirective,
    ModalModule,
    AppToolbarComponent,
    AuditDetailsComponent,
    DropdownComponent,
    //FileuploadComponent,
    DatePickerComponent,
    SearchWellComponent,
    ShowDialogComponent,
    CancelComponent,
    SpinnerComponent,
    CarotComponent,
    OrderByPipe,
    MatchHeightDirective,
    KeyboardCtrlDirective,
    sideMenuHeightDirective,
    CollapseDirective,
    AutoresizeDirective,
    iFrameComponent,
    SearchComponent,
    FieldTooltipDirective,
    SimpleDropdownComponent,
    CheckboxComponent,
    TimeComponent,
    DuplicateComponent,
    CardFilterComponent,
    AppExcelExportComponent,
    SplitButtonModule,
    ConfirmationDialogDirective,
    AppAgGridComponent
  ],
  
  providers: [
    ConfirmationService,
    DropdownService,
    PgridService,
    SearchWellService,
    FileuploadService,
    OrderByPipe,
    TooltipService,
    TooltipResolver,
    RecordUsageResolver
  ]

})
export class SharedModule { }

应用模块文件

import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Third Party Modules
import { DatepickerModule } from 'ngx-bootstrap/datepicker';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
// import { Ng2BootstrapModule } from 'ng2-bootstrap';
import { ToastrModule } from 'ngx-toastr';


// Components.
import { AppComponent } from './app.component';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';

// Directives.
import { AsideToggleDirective } from './shared/aside.directive';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

// Modules.
import { SharedModule } from './shared/shared.module';

// Routing Module
import { AppRoutingModule } from './app.routing';

//Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';

// Services Module
import { ServicesModule } from './services/services.module';
import { AppExceptionHandler } from "./shared/AppExceptionHandler";
import { AuthGuard } from "./shared/auth-guard/auth.guard";
import { LoginGuard } from "./shared/login-guard/login.guard";
import { CanDeactivateGuard } from './shared/can-deactivate/can-deactivate-gaurd';

console.log('app module initialised');

@NgModule({
  imports: [
    HttpModule,
    BrowserModule,
    AppRoutingModule,
    TabsModule.forRoot(),
    ToastrModule.forRoot(),
    BsDropdownModule.forRoot(),
    ModalModule.forRoot(),
    DatepickerModule.forRoot(),
    SharedModule,
    ServicesModule,
    BrowserAnimationsModule
    //Ng2BootstrapModule.forRoot()
  ],

  declarations: [
    AppComponent,
    FullLayoutComponent,
    BreadcrumbsComponent,
    SimpleLayoutComponent,
    AsideToggleDirective,
    NAV_DROPDOWN_DIRECTIVES,
    SIDEBAR_TOGGLE_DIRECTIVES,
  ],

  providers: [ 
               ServicesModule,
               AuthGuard,
               LoginGuard,
               CanDeactivateGuard,
               {provide: ErrorHandler, useClass: AppExceptionHandler},
               {provide: LocationStrategy, useClass: HashLocationStrategy}
             ],
             
  bootstrap: [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from "../shared/shared.module";

// Components
import { ProductionRateComponent } from "./production-rate.component";
import { ProductionRateRoutingModule } from "./production-rate-routing.module";

//Services
import { ProductionRateService } from './production-rate.service';


@NgModule({
  imports: [
    CommonModule,
    ProductionRateRoutingModule,
    SharedModule
  ],

  declarations: [
    ProductionRateComponent
  ],
  providers: [
    ProductionRateService
  ]
})
export class ProductionRateModule { }

执行 npm start 时出现此错误。

Answer 1

您已将组件作为自定义模块导入？

如果以下这些组件是您的自定义模块的一部分，那么我必须在声明数组中导入并导出数组，您可以在其他模块中使用该组件。

确保无论您在何处使用这些组件，您的共享模块都必须由我导入

// Custom modules.
import { AppToolbarComponent } from './app-toolbar/app-toolbar.component';
import { AuditDetailsComponent } from './audit-details/audit-details.component';
import { PgridComponent } from './grid/p-grid.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { DatePickerComponent } from './app-datepicker/app-datepicker.component';
import { SearchWellComponent } from './search-well/search-well.component';
import { ShowDialogComponent } from "./show-dialog/show-dialog.component";
import { CancelComponent } from './app-cancel/app-cancel.component';
import { iFrameComponent } from "./iframe/iframe.component";

---

您的共享模块有时应该如下所示，并且您需要在使用它的组件的任何地方导入该共享模块。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AppToolbarComponent } from './app-toolbar/app-toolbar.component';
import { AuditDetailsComponent } from './audit-details/audit-details.component';
import { PgridComponent } from './grid/p-grid.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { DatePickerComponent } from './app-datepicker/app-datepicker.component';
import { SearchWellComponent } from './search-well/search-well.component';
import { ShowDialogComponent } from "./show-dialog/show-dialog.component";
import { CancelComponent } from './app-cancel/app-cancel.component';
import { iFrameComponent } from "./iframe/iframe.component";

@NgModule({
    declarations: [
        AppToolbarComponent,
        AuditDetailsComponent,
        PgridComponent,
        DropdownComponent,
        DatePickerComponent,
        SearchWellComponent,
        ShowDialogComponent,
        CancelComponent,
        iFrameComponent
    ],
    imports: [
        FormsModule,
        ReactiveFormsModule,
        CommonModule,

    ], schemas: [CUSTOM_ELEMENTS_SCHEMA],

    exports: [CommonModule,
         AppToolbarComponent,
        AuditDetailsComponent,
        PgridComponent,
        DropdownComponent,
        DatePickerComponent,
        SearchWellComponent,
        ShowDialogComponent,
        CancelComponent,
        iFrameComponent
    ]
})
export class SharedModule { }

Answer 2

我终于找到了答案。这不是共享模块的问题，而是IVY的问题。

我使用过primeng并且与IVY不兼容，解决方案是将PrimgNg从6升级到9（与Angular 9 IVY兼容）。

通用的解决方案是，如果您使用过任何第三方库，如primeng、bootstrap，请确保它们已更新到与 Angular 9 兼容的新版本。