javascript - لوله 'safeResourceUrl' پیدا نشد

در حال کار بر روی حل برخی خطاهای امنیتی هستم چون دارم تلاش میکنم ویدئوهای یوتیوب را بهصورت داینامیک در اپلیکیشن Angular 2 خودم قرار دهم. این پاسخ را در مورد استفاده از یک Pipe برای پاکسازی URL اینجا پیدا کردم.

با این حال با این خطای فعلی مواجه شدهام.

لوله 'safeResourceUrl' پیدا نشد

SafeResourceUrl.pipe.ts

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeResourceUrl'})
export class SafeResourceUrl {
    constructor(private sanitizer:DomSanitizer){}

    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

من آن را در app.module خود وارد کردهام

import { NgModule } from '@angular/core';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SafeResourceUrl } from './shared/pipes/saferesourceurl.pipe';

@NgModule({
    declarations: [
        AppComponent,
        SafeResourceUrl
    ],
    imports: [
        SharedModule,
        HomeModule,
        AppRoutingModule
    ]
})

و در home.component.ts من وارد شد

import { SafeResourceUrl } from '../shared/pipes/saferesourceurl.pipe';

نشانهگذاری برای home.component.html

<div class="container col-lg-3 col-md-6 col-sm-12" *ngFor="let card of category.categorycards">
<div class="thumbnail">
    <a href="/wiki/entity" *ngIf="card.type == 'image'">
        <div class="image-wrap">
            <img [src]="card.graphic" class="img-responsive" alt="[card.title]" title="[card.title]">
        </div>
    </a>

    <a href="/wiki/category" *ngIf="card.type == 'video'">
        <div class="image-wrap">
            <iframe title="YouTube video player"
                    class="youtube-player" type="text/html" 

                    [src]="card.url | safeResourceUrl"

                    height="100%" width="100%" frameborder="0"></iframe>
        </div>
    </a>

پاسخ شماره ۱

لولهها نمیتوانند بهصورت جهانی در دسترس باشند. آنها باید هر جایی که استفاده میشوند وارد شوند، همانند کامپوننتها یا دایرکتیوها.

@NgModule({
    declarations: [
        SafeResourceUrl
    ],
    imports: [
      CommonModule
    ]
})
class SharedModule {

@NgModule({
    declarations: [
      CommonModule,
      HomeComponent,
    ],
    imports: [
        SharedModule,
    ]
})
class HomeModule