Search code examples
angularmigration

Class LocalizeRouterModule cannot be imported (Angular migration)

I'm currently doing an Angular migration from 8.2 to 9.1.13. The compiler is working, but when I go on the page, I've a blank page. The console is giving this error enter image description here When I debug I can find this enter image description here I found it in my app.module

imports ...
import {LocalizeRouterModule} from "localize-router";

registerLocaleData(localeNl, 'nl');
registerLocaleData(localeFr, 'fr');
registerLocaleData(localeDe, 'de');

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/locales/', '.json');
}

const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    IdentificationComponent,
    WelcomeComponent,
    UploadEidComponent,
    AddressComponent,
    FinancialComponent,
    CommunicationComponent,
    FullUnemploymentHostDirective,
    FullUnemploymentComponent,
    RequestComponent,
    ErrorDialogComponent,
    MakingAppointmentComponent,
    ActivityComponent,
    IncomeComponent,
    MakingAppointmentComponent,
    FamilySituationComponent,
    FamilyMemberComponent,
    BlockCopyPasteDirective,
    OnlyNumberDirective,
    DatepickerPopupComponent,
    BreadcrumbButtonComponent,
    FullContactUploadDocumentsComponent,
    FullContactCompletedComponent,
    ConfirmationComponent,
    TokenExpiredComponent,
    MultiUploadComponent,
    DevelopmentComponent,
    CookieComponent
  ],
  imports: [
    StoreModule.forRoot(reducers),
    BrowserModule,
    LocalizeRouterModule,
    BrowserAnimationsModule,
    MatButtonToggleModule,
    MatIconModule,
    AppRoutingModule,
    DossierModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    SideNavModule,
    NgbModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    MatGridListModule
  ],
  providers: [AppConfigService, UserLoginService, AuthGuard, OnboardingRequestGuard, LoggedInUserService, AvailabilityService, CookieService, DatePipe,
    {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter},
    {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true},
    {provide: APP_INITIALIZER, useFactory: appInitializerFn, deps: [AppConfigService], multi: true}
  ],
  exports: [
    FamilySituationComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

with the module LocalizeRouterModule that has this error : Class LocalizeRouterModule cannot be imported (neither an Angular module nor a standalone declarable)

Someone could help me?

I tried to debug, I'm using localize-router, should I change it?

Solution

  • The issue is that the library localize-router is no longer supported, so it was not updated to angular 9.x... looking at its latest package.json it supported angular 6.x so it was barely supported by your previous version.

    If you really want to keep using it, you would have to fork the "localize-router" library and upgrade it yourself to angular v9.1.13, then reference your forked code.

    I would suggest you try upgrading to at least angular 14, so you get into a LTS angular version. Angular 9.x is not supported for a few years... With the new angular localization structures you might just want to stop using the "localize-router" library.