0

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. enter image description here

Syed Abbas
  • 49
  • 1
  • 8

2 Answers2

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 { }
Amit Golhar
  • 799
  • 4
  • 8
  • 21
  • Hi Amit, Im exactly doing the same thing like all the reusable components are part of declarations and export array. Also in all my lazy modules im importing shared module to use these components. still not able to figure out the issue why is it occurring? – Syed Abbas Feb 03 '21 at 10:37
  • make sure you have also imported : - CommonModule like import { CommonModule } from '@angular/common'; – Amit Golhar Feb 03 '21 at 10:38
  • Yes Amit. Updated the post with app module file and component module file – Syed Abbas Feb 03 '21 at 11:12
  • Also make sure you import the right SharedModule in your AppModule. PrimeNg has it's own shared module and choosing the wrong location breaks everything. I checked. – Josh Feb 19 '22 at 00:53
0

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.

Syed Abbas
  • 49
  • 1
  • 8