翻译无法在错误组件angular2 / 6中使用

Question

正在加载应用程序时，我正在调用将加载主数据的服务。如果由于任何网络问题而未加载主数据。然后，我通过将错误存储在本地存储中并在错误组件中检索错误来导航到错误组件。在Error.component.html中，我使用的是“ |翻译”。这不起作用。所有其他html文件都在使用翻译管道。

应用程序模块

<div class="myFeedback">
  <div id='guess-feedback' class="talk-bubble tri-right round right-in">
    <h4 class="talktext"></h4>
  </div>
</div>

应用加载模块

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        // :CORE MODULE: //
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        TranslateModule.forRoot(
            {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [Http]
            }),
        FormsModule,
        CommonModule, //<====added

        //:3RD PARTY MODULE://
        BootstrapModalModule,

        //:APPLICTION MODULES: //
        AppLoadModule, //Startupdata before APP loaded
        AppRoutingModule,
        FooterModule,
        ErrorModule,
        AccessDeniedModule,
        NotFoundModule,
        RouterModule.forRoot([]),
        ToasterModule.forChild(),
    ],
    providers: [
        LoaderService,
        ToasterService,
        StartupService,
        ResponseStatusesService,
        LocalStorageService,
        ApplicationSettingsService,
        LabSelectionService,
        AccountService,
        AuthService,
        AlertService,
        AuthGuard,
        RolesGuard,
        FeaturebasedGuard,
        ErrorLogService,
        {
            provide: ErrorHandler,
            useClass: GlobalErrorsHandler
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AppHttpInterceptor,
            multi: true
        },
        {
            provide: LocationStrategy,
            useClass: HashLocationStrategy
        },
    ],
    exports: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

应用加载服务

export function load(appLoadService: AppLoadService) {
  return () => appLoadService.load();
}


@NgModule({
  imports: [HttpClientModule],
  providers: [
    AppLoadService,
    { provide: APP_INITIALIZER, useFactory: load, deps: [AppLoadService], multi: true }

  ]
})
export class AppLoadModule { }

应用程序路由模块

 load(): Promise<any> {
        return new Promise(resolve => {
            const promise = this.httpClient.get('assets/settings/config.json')
                .subscribe(
                    res_config => {                       
                        /*=========== AUTH  CALL API - START ===========*/
                        this.httpClient.get('/api/auth')
                            .subscribe(
                                res_auth_context => {
                                    this.storeUserContext(res);
                                    console.log('@auth context loaded step3');

                                    /*=========== LOAD master data ===========*/
                                    this.httpClient.get('/xyz/masterData')
                                        .subscribe(
                                            res => {
                                               
                                                console.log(" master data Loaded");
                                                resolve();
                                            },
                                            err => {
                                                debugger;
                                                this.localStorage.store("error", err);
                                                let router = this.injector.get(Router);
                                                router.navigate(['error']);
                                                resolve();
                                            }
                                        );
                                    /*=========== LOAD Mastre data ===========*/
                                },
                                res_auth_context_error => {
                                    console.log("Auth Call Failed");
                                }
                            );
                        /*=========== AUTH CALL API - END ===========*/

                    },
                    res_config_Error => {
                        console.log("config file NOT  loaded", res_config_Error);
                    }
                );
        });
    }

错误路由模块

const routes: Routes = [
    {
        path: '',
        children: [
            { path: '', loadChildren: './home/home.module#HomeModule' },
            { path: 'error', loadChildren: './core/error/error.module#ErrorModule' },
            { path: 'accessDenied', loadChildren: './accessDenied/access-denied.module#AccessDeniedModule' },
            { path: 'notfound', loadChildren: './notFound/not-found.module#NotFoundModule' },
            { path: '**', redirectTo: '/notfound' }
        ]
    }

];

@NgModule({
    declarations: [],
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

error.component.html

const routes: Routes = [
    {
        path: '', component: ErrorComponent
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ErrorRoutingModule { }

错误模块

<p class="m-y text-muted h4">
     <a (click)="logout()" class="text-danger">{{'logout'|translate}} and Re-login</a>
 </p>
<textarea [(ngModel)]='errorMessage' [disabled]="true" rows="10" cols="120"></textarea>