Angular 9 делятся ngx-переводами с пользовательской библиотекой angular

Question

Я создаю пользовательскую библиотеку angular для внутреннего приложения, и я столкнулся с проблемой, заключающейся в том, что моя библиотека не может использовать переводы основных приложений. Как мне решить такую ​​проблему? См. Код ниже.

библиотеки / проекты / аутентификация / authentication.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core';

import { AuthenticationRoutingModule } from './authentication-routing.module';
import { LoginComponent } from './login/login.component';
import { RegistrationComponent } from './registration/registration.component';
import { EnvironmentInterface, Environment } from './environment';
@NgModule({
  declarations: [LoginComponent, RegistrationComponent],
  imports: [
    CommonModule,
    AuthenticationRoutingModule,
    NgbAlertModule,
    ReactiveFormsModule,
    HttpClientModule,
    TranslateModule
  ],
  exports: [LoginComponent, RegistrationComponent]
})
export class AuthenticationModule {
  static forRoot(
    environmentInterface: EnvironmentInterface
  ): ModuleWithProviders {
    return {
      ngModule: AuthenticationModule,
      providers: [{ provide: Environment, useValue: environmentInterface }]
    };
  }
}

Проблема в том, что он не переводит текст, как ожидалось, и вместо этого отображается следующее

Код для шаблона библиотеки библиотеки / проекты / аутентификация / логин / логин.component. html в библиотеке.

 <div class="row mt-3">
              <div class="col-12 text-center">
                <p>
                  <a
                    routerLink="/account/reset-password"
                    class="text-white-50 ml-1"
                    >{{ 'authentication.forgotPassword' | translate }}</a
                  >
                </p>
                <p class="text-white-50">
                  Don't have an account?
                  <a
                    routerLink="/authentication/registration"
                    class="text-white ml-1"
                    ><b>Sign Up</b></a
                  >
                </p>
              </div>
              <!-- end col -->
            </div>

Ниже приведен файл app.module.ts для приложения, использующего мою библиотеку

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {
  HttpClientModule,
  HTTP_INTERCEPTORS,
  HttpClient
} from '@angular/common/http';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';

import { AuthenticationModule } from 'authentication';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LayoutsModule } from './layouts/layouts.module';
import { AuthenticationInterceptorService } from './services/authentication-interceptor.service';
import { environment } from 'src/environments/environment';

/**
 * required for AOT compilation
 * Don't add empty json files to array this will cause errors.
 */

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new MultiTranslateHttpLoader(httpClient, [
    { prefix: '../assets/translations/global/', suffix: '.json' },
    { prefix: '../assets/translations/overrides/', suffix: '.json' }
  ]);
}
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    LayoutsModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    AuthenticationModule.forRoot({ apiUrl: environment.apiUrl })
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthenticationInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}