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