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

问题描述

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

节点从 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,AgGridNumberFilter,PrimengDatePickerDecorator
  ],exports: [
    CommonModule,AgGridModule,ModalModule,AppToolbarComponent,AppAgGridComponent
  ],providers: [
    ConfirmationService,DropdownService,PgridService,SearchWellService,FileuploadService,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(),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 时出现此错误。

解决方法

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

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

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

// 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,iFrameComponent
    ]
})
export class SharedModule { }

,

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

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

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