Не удалось найти трубу "перевод"

Question

Это мой тестовый компонент. html файл:

<div class="my-container">
  <span>{{ 'locations' | translation }}</span>
</div>

Это translation.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
import { TranslationsService } from './translations.service';

@Pipe({ name: 'translation' })
export class TranslationPipe implements PipeTransform {
  constructor(private myTranslationsService: TranslationsService) {}

  transform(value: string): string {
    return this.myTranslationsService.get(value);
  }
}

А это файл test.module.ts :

import { TestComponent } from './test.component';
import { Injector, DoBootstrap, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { TranslationsService } from '../shared/translations.service';
import { TranslationPipe } from '../shared/translation.pipe';

@NgModule({
  declarations: [TestComponent, TranslationPipe],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  entryComponents: [TestComponent],
  providers: [TranslationsService],
  exports: []
})
export class TestModule implements DoBootstrap {
  constructor(private injector: Injector) {

  }

  ngDoBootstrap() {
    const ngElement = createCustomElement(TestComponent, { injector: this.injector, });
    customElements.get('my-test') || customElements.define('my-test', ngElement);
  }
}

Когда я запускаю приложение, я получаю консольную ошибку: «Перевод» канала не может быть найден! Что я делаю не так?

Answer 1

Попробуйте импортировать CommonModule

import {CommonModule} from "@angular/common";

Answer 2

Добавьте свой TranslationPipe к providers

  providers: [TranslationsService, TranslationPipe],