After angular 15 to 16 Migration Code stopped compiling with attached errors

Question

After I upgraded my codebase from Angular 15 to Angular 16, it stopped compiling. Here are the steps I've tried:

Updated all dependencies: When I run ng update, I don't get any pending updates.
Cleared Cache: Deleted the node_modules folder and package_lock.json file, and did a clean npm install.

npm install runs successfully but when I compile, I always get an error in one of my main modules:

Error: src/app/tasks/tasks.module.ts:20:5 - error NG6002: 'AppModuleShared' does not appear to be an NgModule class.
AppModuleShared

There have been no changes to this module code after the upgrade to Angular 16. There was no change in any code in the upgrade process, neither in tasks.module.ts nor AppModuleShared.

Here's the code snippet where the error is occurring:

typescript

@NgModule({
  declarations: [
    InboxComponent,
    TaskStatusPipe
  ],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'tasks', component: InboxComponent }
    ]),
    AppModuleShared // Getting error at this line
  ]
})
export class TasksModule { }

here is app-module-shared-

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatStepperModule } from '@angular/material/stepper';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import {MatExpansionModule} from '@angular/material/expansion';
import { MatTreeModule } from '@angular/material/tree';
import { LayoutModule } from '@angular/cdk/layout';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ProductTileComponent } from './shared/product-tile/product-tile.component';
import { ProductAliasTileComponent } from './shared/product-alias-tile/product-alias-tile.component';
import { DragulaModule } from 'ng2-dragula';
import { NgxsModule } from '@ngxs/store';
import { TourMatMenuModule } from 'ngx-tour-md-menu';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NguCarouselModule } from '@ngu/carousel';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatDatetimepickerModule, MatNativeDatetimeModule, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { CommonModule } from '@angular/common';
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';

import { CmpState } from '../states/CmpState';
import { FavouritesState } from '../states/FavouritesState';
import { UserState } from '../states/UserState';
import { PrefsState } from '../states/PrefsState';
import { OrderForState } from '../states/OrderForState';
import { BasketState } from '../states/BasketState';
import { PreferencesComponent } from './shared/preferences/preferences.component';
import { ProfileComponent } from './shared/profile/profile.component';
import { BasketComponent } from './shared/basket/basket.component';
import { BreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';

import { HomeSwitchAddressComponent } from './home/home-switch-address/home-switch-address.component';
import { HomeSwitchUserComponent } from './home/home-switch-user/home-switch-user.component';
import { OverlayModule } from '@angular/cdk/overlay';
import { ToastrModule } from 'ngx-toastr';
import { ShoppingListComponent } from './shared/shopping-list/shopping-list.component';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

import { CustomDateAdapter } from './product/questionnaire/form-elements/date-time/custom-date-adapter';
import { DateAdapter } from '@angular/material/core';
import { PreviousRouteService } from './previous-route.service';
import { RulesService } from 'src/services/Questionnaire/RulesService';
import { QuestionnaireService } from 'src/services/Questionnaire/QuestionnaireService';
import { CategoriesState } from '../states/CategoriesState';
import { LookupService } from 'src/services/Questionnaire/LookupService';
import { HelperService } from 'src/services/Helper/HelperService';
import { ExcelOrdersHelperService } from 'src/services/Helper/ExcelOrdersHelperService';
import { DecodeHtml, EncodeUriPipe, SafePipe } from 'src/pipes';

import { OrderForPaneComponent } from './shared/order-for-pane/order-for-pane.component';
import { OrderReviewState } from 'src/states/order-review.state';
import { GetProfilePicPipe } from 'src/pipes/get-profile-pic.pipe';
import { FormatDatePipe } from 'src/pipes/format-date.pipe';
import { configuration } from 'src/domain';
import { FilterPipe } from 'src/pipes/filter.pipe';
import { LuceneExplanationBottomSheetComponent } from './shared/lucene-explanation-bottom-sheet/lucene-explanation-bottom-sheet.component';
import { SupportTabComponent } from './shared/support-tab/support-tab.component';
import { IconsService } from 'src/services/Icons/IconsService';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { HelpCentreState } from 'src/states/help-centre.state';
import { OrdersService } from 'src/services';
import { ProductTileNarrowComponent } from './shared/product-tile-narrow/product-tile-narrow.component';
import { InfoModalComponent } from './shared/info-modal/info-modal.component';
import { ApiUserProfileComponent } from './shared/api-user-profile/api-user-profile.component';
import { TemplateGroupComponent } from './shared/template-group/template-group.component';
import { TemplateCreatorComponent } from './shared/template-creator/template-creator.component';
import { CreateTemplateDialogComponent } from './shared/create-template-dialog/create-template-dialog.component';
import { TemplatesState } from 'src/states/TemplatesState';
import { TemplateCreatorWrapperComponent } from './shared/template-creator-wrapper/template-creator-wrapper.component';
import { TemplateFromOrderCreatorComponent } from './shared/template-from-order-creator/template-from-order-creator.component';
import { ReorderState } from 'src/states/ReorderState';
import { CopyTemplateWrapperComponent } from './shared/copy-template-wrapper/copy-template-wrapper-dialog.component';
import { SharedTemplateGroupComponent } from './shared/shared-template-group/shared-template-group.component';

const LOCALE_DATETIMEPICKER_FORMATS = {
  parse: { dateInput: { day: '2-digit', hour: '2-digit', minute: '2-digit', month: '2-digit', year: 'numeric' } },
  display: {
    dateInput: { year: 'numeric', month: '2-digit', day: '2-digit', customDate: 'true' },
    monthInput: { month: 'long' },
    datetimeInput: 'input',
    timeInput: { hour: '2-digit', minute: '2-digit' },
    monthYearLabel: { year: 'numeric', month: 'short' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
    popupHeaderDateLabel: { weekday: 'short', month: 'short', day: '2-digit' }
  }
};

@NgModule({
  declarations: [
    ProductTileComponent,
    ProductAliasTileComponent,
    ProductTileNarrowComponent,
    PreferencesComponent,
    ProfileComponent,
    ApiUserProfileComponent,
    DecodeHtml,
    BasketComponent,
   
    SafePipe,
    EncodeUriPipe,
    OrderForPaneComponent,
    GetProfilePicPipe,
    FormatDatePipe,
    FilterPipe,
    LuceneExplanationBottomSheetComponent,
    SupportTabComponent,
    TemplateGroupComponent,
    TemplateCreatorComponent,
    TemplateCreatorWrapperComponent,
    CreateTemplateDialogComponent,
    TemplateFromOrderCreatorComponent,
    CopyTemplateWrapperComponent,
    SharedTemplateGroupComponent
  ],
  imports: [
    NgxsModule.forRoot([
      CmpState,
   
      OrderReviewState,
      TemplatesState,
      ReorderState,
    ], {selectorOptions: { suppressErrors: false }, developmentMode: false}),
    CommonModule,
    MatSlideToggleModule,
    ToastrModule.forRoot(),
    FormsModule,
    OverlayModule,
    ReactiveFormsModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    LayoutModule,
   
    DragulaModule.forRoot(),
    TourMatMenuModule.forRoot(),
    HttpClientModule,
    NguCarouselModule,
    MatMenuModule,
    MatProgressBarModule,
    MatAutocompleteModule,
    
    MatSortModule,
    RouterModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: function (httpClient: HttpClient) {
          return new TranslateHttpLoader(httpClient, '/assets/i18n/', `-lang.json?version=${configuration.version}`);
        },
        deps: [HttpClient]
      }
    })
  ],
  exports: [
   
    CommonModule,
    FormsModule,
    
    MatSortModule,
    TranslateModule,
    RouterModule,
    BreadcrumbComponent,
    SafePipe,
    EncodeUriPipe,
    OrderForPaneComponent,
    GetProfilePicPipe,
    FormatDatePipe,
    FilterPipe,
  
    SharedTemplateGroupComponent
  ],
  providers: [
    QuestionnaireState,
    
    
    IconsService,
    LookupService,
    MatNativeDateModule,
    CustomDateAdapter,
    PreviousRouteService,
    { provide: DateAdapter, useClass: CustomDateAdapter },
    { provide: MAT_DATETIME_FORMATS, useValue: LOCALE_DATETIMEPICKER_FORMATS },
    { provide: MAT_DATE_FORMATS, useValue: LOCALE_DATETIMEPICKER_FORMATS }
  ]
})
export class AppModuleShared {
}

Can you also post the code for that `tasks.module.ts` file? Is that the only error you are getting? How is that module registered in the application? — Chris Barr, Jul 21 '23 at 13:08
@NgModule({ declarations: [InboxComponent, TaskStatusPipe], imports: [ CommonModule, RouterModule.forChild( [ { path: 'tasks', component: InboxComponent } ] ), AppModuleShared //Getting error at this line ] }) export class TasksModule { } — FrontEndNewbie, Jul 21 '23 at 13:22
Please edit your question and put the code in there where it is a bit more readable than in a comment where it's all smushed together — Chris Barr, Jul 21 '23 at 13:35
Agreed - we need more code to review your question. Please post the content of AppModuleShared and tasks.module.ts in a readable way into your question. — SickerDude43, Jul 21 '23 at 13:59
Updated with code samples. Sorry It was my first post here so got confused on how to set this up properly. — FrontEndNewbie, Jul 21 '23 at 15:48
Updated the code now, Still same issue . That was put while debugging. — FrontEndNewbie, Jul 24 '23 at 10:08
Stuck in this from last 5 days, No moving forward, Can someone please guide me, what might be the issue. I see someone had misilar issue here - but no answer to that question as well -https://stackoverflow.com/questions/74730274/does-not-appear-to-be-an-ngmodule-class-error-after-updating-to-angular15 — FrontEndNewbie, Jul 24 '23 at 10:09

After angular 15 to 16 Migration Code stopped compiling with attached errors

0 Answers0