Imports of Shared Module not working in Shared components after upgrading Angular 9

Question

I have upgraded my project to below versions

Node from 11 -> 12 Angular from 8 -> 9

App started throwing compile time errors. Application has lot of shared components which are declared under declarations array and export array of SharedModule

We use primeng, aggrid and imported and exported all of the necessary modules of them in a shared module. And Shared module is imported in App module.

My Shared Module is below

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

App Module File

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

Getting this error when doing npm start.

Answer 1

you have imported Components as custom module?

if these below components are part of your custom module then it must me imported in declaration array and export array them you can use that components in another modules.

make sure wherever you are using these component your shared module must me imported

// 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";

---

Your shared modules should be sometime like below and you need to import this shared module wherever you are using it's 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

Finally, I found an answer for this. This is not a problem of Shared module but problem of IVY.

I have used primeng and that were not in compatible with IVY, Solution was to upgrade PrimgNg from 6 to 9(Compatible with Angular 9 IVY).

Generic solution is if you have used any third party libs like primeng, bootstrap make sure they are updated to new versions which are in compatible with Angular 9.