角度通用和翻译

Question

添加延迟加载后，我遇到了闪烁问题（使用通用模块在服务器端渲染后重绘视图） 我已经通过 initialNavigation: 'enabled' 解决了这个问题 并且它的修复闪烁 但是这个选项破坏了 url 中带有 lang 前缀的所有路由 并且像“/ru/user/deposit”这样的所有路由都呈现为主页，而在服务器端没有翻译。没有前缀的路由在服务器端渲染得很好。

app.routering.module.ts

const routes: Routes = [

  { path: '', redirectTo: 'sport/esports', pathMatch: 'full' },
  {
    path: 'sport/esports',
    loadChildren: './modules/matches/matches.module#MatchesModule',
  },
  {
    path: 'blog',
    loadChildren: './modules/blog/blog.module#BlogModule',
  },
  {
    path: 'static',
    loadChildren: './modules/static/static.module#StaticModule',
  },
  {
    path: 'slots',
    loadChildren: './modules/slots/slots.module#SlotsModule',
    canActivate: [FreeLootGuard]
  },
  {
    path: 'user',
    loadChildren: './layouts/user-layout/user-layout.module#UserLayoutModule'
  },
  {
    path: '**', redirectTo: '/sport/esports', pathMatch: 'full'
  }
];
@NgModule({
  imports: [
    LocalizeRouterModule.forRoot(routes, {
      parser: {
        provide: LocalizeParser,
        useFactory: (translate, location, settings) =>
          new ManualParserLoader(translate, location, settings, ['en', 'ru', 'pl', 'es', 'de', 'tr', 'fil', 'pt', 'zh'], ''),
        deps: [TranslateService, Location, LocalizeRouterSettings]
      },
      alwaysSetPrefix: false,
      useCachedLang: false
    }),
    RouterModule.forRoot(routes, {initialNavigation: 'enabled'}),
  ],
  exports: [RouterModule]
});

app.server.module.ts

export function translateFactory(transferState: TransferState) {
  return new TranslateServerLoader('/assets/i18n/', '.json', transferState);
}

export function localizeLoaderFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings) {
  return new LocalizeServerLoader(translate, location, settings);
}

if (environment.sentryUrl) {
  SentryNode.init({
    dsn: environment.sentryUrl
  });
}

@Injectable()
export class SentryNodeErrorHandler implements ErrorHandler {
  constructor() {}
  handleError(error) {
    let message: any;
    let err: any;
    if (environment.sentryUrl) {
      if (error.status) {
        if (error && error.error && error.error.messages && error.error.messages.length) {
          message = error.error.messages[0];
        } else {
          message = error.message || 'Not found';
        }
      } else if (error.rejection) {
        message = error.toString();
      } else {
        message = error;
      }
      err = typeof message === 'string' ? new Error(message) : error;
      SentryNode.captureException(error.originalError || err);
    } else {
      console.error(error);
    }
  }
}

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
    ServerTransferStateModule,
    TranslateModule.forRoot({
      loader:{
        provide: TranslateLoader,
        useFactory: translateFactory,
        deps: [TransferState]
      }
    })
  ],
  providers: [
    { provide: ErrorHandler, useClass: SentryNodeErrorHandler },
    { provide: CookieService, useClass: CookieBackendService },
    // Add universal-only providers here
  ],
  bootstrap: [ AppComponent ],
})
export class AppServerModule {}

Answer 1

问题已由初始化程序解决 https://medium.com/@fessbespalov/enabling-initialnavigation-with-localizerouter-and-angular-universal-8d514f1faad9