找不到管道“translation”

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

这是翻译.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);
  }
}

这就是测试模块.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);
  }
}

当我运行的应用程序,我得到控制台错误,管道'翻译'找不到!我做错什么了?