angular - Angular 9-WebComponent 和 i18n（翻译模块）

Question

我制作了一个 webComponent，所以我可以在其他应用程序中使用它。但是我有两个问题，当我在主机应用程序中调用 WebComponent 时，没有找到翻译文件 (../assets/i18n/de.json) 和我的 webComponent 中的样式。

import {CommonModule, registerLocaleData} from '@angular/common';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {DoBootstrap, Injector, LOCALE_ID, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppComponent} from './app.component';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {from, Observable} from 'rxjs';
import {StylesModule} from './styles.module';
import {NgxPermissionsModule} from 'ngx-permissions';
import localeDe from '@angular/common/locales/de';
import { createCustomElement } from '@angular/elements';
import { ConversationComponent } from './components/conversation/conversation.component';
import {BackendCallInterceptor} from './interceptors/backend-call.interceptor';


export class WebpackTranslateLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    // @ts-ignore
    return from(System.import(`../assets/i18n/de.json`));
  }
}
registerLocaleData(localeDe, 'de');

@NgModule({
  declarations: [
    AppComponent,
    ConversationComponent,
  ],
  imports: [
    CommonModule,
    StylesModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: WebpackTranslateLoader
      }
    }),
    NgxPermissionsModule.forRoot(),
    NdbxIconModule
  ],
  providers: [
    {provide: LOCALE_ID, useValue: 'de-DE'},
    {provide: HTTP_INTERCEPTORS, useClass: BackendCallInterceptor, multi: true}
  ],
  // bootstrap: [AppComponent , ConversationComponent],
  exports: [ 
    ConversationComponent
  ],
  entryComponents: [AppComponent, ConversationComponent]
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {
  }
  ngDoBootstrap(): void {
    const strategyFactory = new ElementZoneStrategyFactory(ConversationComponent, this.injector);
    const el1 = createCustomElement(ConversationComponent, {injector: this.injector});
    customElements.define('conversation', el1);
  }
}

当我调用 WebComponent 时，文本会显示在图像中

标签： angularweb-componentangular10