Open Closed

Adding a new Angular pipe #10235

rvanwoezik created

ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0

I have added a pipe: 'vimeo-url.pipe.ts' in the folder Web.Host\src\shared\common\pipes

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

    name: 'vimeoUrl'

export class VimeoUrlPipe implements PipeTransform {

    _sanitizer: DomSanitizer;

    constructor(injector: Injector) {
        this._sanitizer = injector.get(DomSanitizer);

    transform(value: any, args?: any): any {
        let url = value.replace("", "");

        return this._sanitizer.bypassSecurityTrustResourceUrl(url);



In the utils.module.ts i'm importing this pipe: import { VimeoUrlPipe } from '@shared/common/pipes/vimeo-url.pipe';

I've add it to the declarations in utils.module.ts and also to the exports

The admin-shared.module.ts imports the utils.module.ts And my courses.module.ts imports the admin-shared.module.ts

When running i get the error "No pipe found with the name 'vimeoUrl'

What am i missing? What is the correct way to add a new pipe?

Thanks in advance

2 Answer(s)
  • 0
    musa.demir created
    Support Team

    You should also add it to the exports,

        declarations: [
        exports: [
    export class UtilsModule { }
  • 0
    rvanwoezik created