Вам не нужно использовать декоратор Injectable для канала, поэтому вы можете удалить его.

Кроме того, как уже предлагалось в других ответах, я бы порекомендовал вам явно реализовать интерфейс PipeTransform, чтобы он соответствовал API канала.

compiler.js:486 Uncaught Error: Template parse errors: The pipe 'default' could not be found ("

{{[ERROR ->] 'somthing' | default }} "): ng:///AppRoutingModule/LoginComponent.html@75:6 at syntaxError (compiler.js:486)

в основном говорит о том, что ваш канал не был ни объявлен, ни импортирован в модуль, в котором объявлен LoginComponent.

Самым простым и чистым решением было бы объявить / экспортировать канал внутри нового класса NgModule, который затем можно было бы импортировать в каждый модуль, объявляющий компонент, использующий канал. Например:

@NgModule({
  declarations: [DefaultPipe],
  exports: [DefaultPipe]
})
export class DefaultPipeModule{}

@NgModule({
  imports: [DefaultPipeModule],
  declarations: [LoginComponent]
})
export class FooModule {}

@NgModule({
  imports: [DefaultPipeModule],
  declarations: [FooComponent] // fooComponent also uses the default pipe, so we need to import its module
})
export class SomeOtherModule{}

Ссылка: здесь

Пользовательская труба:

Прежде всего, нет @Injectable (), поскольку это не служба, которую вы определяете в конструкторе. Затем вам нужно импортировать PipeTransform из '@angular/core' и реализовать его.

Пример:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: "default"
})

export class DefaultPipe implements PipeTransform {
    transform(value: string, fallback: string): string {
        let image = "";
        if (value) {
            image = value;
        } else {
            image = fallback;
        }
        return image;
    }
}

Лучшая практика для создания вспомогательных компонентов, каналов или директив - создать SharedModule и поместить его внутрь.

Компоненты, директивы и конвейеры не работают как службы. Сервис, который вы можете внедрить в массив сервисов AppModule, и он будет работать и для детей.

Канал, директиву или компонент, вы должны объявить их в NgModule, а затем импортировать их туда, где они вам нужны, потому что они могут ТОЛЬКО относится к 1 модулю. (Но этот модуль можно импортировать сколько угодно раз!)

Поэтому лучшее, что вы можете сделать, - это создать SharedModule со следующим:

@NgModule({
  imports: [ ... ],
  declarations: [ DefaultPipe ],
  exports: [ DefaultPipe ]
})
export class SharedModule { }

А затем в AppModule вы импортируете SharedModule следующим образом:

imports: [ SharedModule ]

А теперь, если вы хотите использовать его в своем компоненте LoginComponent или в любой другой части вашего приложения, вы импортируете свой SharedModule в модуль для этого компонента.