Angular 8.2迁移至9.1.13时LocalizeRouterModule导入报错求助

问题详情 #

项目从 Angular 8.2 升级到 9.1.13 后，编译过程正常，但页面打开后显示空白，控制台抛出错误：Class LocalizeRouterModule cannot be imported (neither an Angular module nor a standalone declarable)。当前在 app.module.ts 中直接导入了 LocalizeRouterModule。

解决步骤 #

1. 升级 localize-router 到兼容版本 #

Angular 9 对依赖库的版本有明确要求，旧版 localize-router（适配 Angular 8 的版本）无法在 Angular 9 环境中正常工作。执行以下命令安装适配 Angular 9 的版本：

npm install localize-router@^2.0.0 --save

注：localize-router v2.x 系列专门适配 Angular 9，可根据实际需求调整具体子版本号。

2. 修正 LocalizeRouterModule 的导入方式 #

LocalizeRouterModule 不能直接导入，必须通过 forRoot() 方法结合路由配置和本地化规则初始化。修改 app.module.ts 如下：

首先补充必要的导入：

import { LocalizeRouterModule, LocalizeParser, ManualParserLoader } from 'localize-router';
import { TranslateService } from '@ngx-translate/core';
// 导入项目的路由配置
import { routes } from './app-routing.module';

然后在 @NgModule 的 imports 数组中替换原有的 LocalizeRouterModule：

LocalizeRouterModule.forRoot(routes, {
  parser: {
    provide: LocalizeParser,
    useFactory: (translate: TranslateService, http: HttpClient) => 
      new ManualParserLoader(translate, http, './assets/locales/', '.json'),
    deps: [TranslateService, HttpClient]
  },
  defaultLang: 'nl',
  alwaysSetPrefix: true
})

3. 同步升级相关依赖 #

确保 @ngx-translate 系列库也适配 Angular 9，避免依赖冲突：

npm install @ngx-translate/core@^12.0.0 @ngx-translate/http-loader@^5.0.0 --save

4. 备选方案：替换本地化路由工具 #

如果上述调整仍无法解决问题，或者考虑到 localize-router 的后续维护情况，可以替换为更适配新版本 Angular 的方案：

• 使用 Angular 官方的 @angular/localize 结合路由守卫实现本地化路由逻辑
• 改用 ngx-translate-router（针对较新 Angular 版本开发的路由本地化库）

修改后的 app.module.ts 关键代码示例 #

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { LocalizeRouterModule, LocalizeParser, ManualParserLoader } from 'localize-router';
import { routes } from './app-routing.module';
import { TranslateService } from '@ngx-translate/core';

// 其他组件、服务导入...
import { AppComponent } from './app.component';

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

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

// LocalizeRouter 解析器工厂函数
export function localizeLoaderFactory(translate: TranslateService, http: HttpClient) {
  return new ManualParserLoader(translate, http, './assets/locales/', '.json');
}

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

@NgModule({
  declarations: [
    AppComponent,
    // ...其他组件声明
  ],
  imports: [
    StoreModule.forRoot(reducers),
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonToggleModule,
    MatIconModule,
    AppRoutingModule,
    DossierModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    SideNavModule,
    NgbModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    // 修正后的 LocalizeRouterModule 初始化
    LocalizeRouterModule.forRoot(routes, {
      parser: {
        provide: LocalizeParser,
        useFactory: localizeLoaderFactory,
        deps: [TranslateService, HttpClient]
      },
      defaultLang: 'nl'
    }),
    MatGridListModule
  ],
  providers: [
    AppConfigService, UserLoginService, AuthGuard,
    // ...其他提供者配置
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Gladitor