Nativescript-angular: The pipe 'mypipe' could not be found

[xjpmauricio]

Hi all, I'm trying to use pipes and I've developed my own very simplified pipe just to get things started but, I keep getting this error:

The pipe 'mypipe' could not be found

Here's the code to my pipe:

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
    name: 'welcome'
})
export class WelcomePipe implements PipeTransform {
  transform(value: string): string {
    let message = "Welcome to " + value;
    return message;
  }
} 

The html usage example:

[text]="'Heaven' | welcome"

In my app.module, I've tried to reference it almost everywhere (declarations, providers, etc) but with no luck. I'm also getting this problem with other components that use pipes on the html/xml side of the app.

Any ideias?

[tsonevn]

Hi @xjpmauricio,
The custom pipe should be registered in the module's declarations. You can check our sample project here, where this scenario with the custom pipe is demonstrated. You can review the project and check what the differences between the sample and your project are.

Also, it will help if you send us sample project, which can be used for debugging.

[xjpmauricio]

Hi @tsonevn, I made a test using this template:

tns create my-app-name --template tns-template-blank-ng

I created a pipe and a page where I use the pipe. I'm attaching the source code of the test app:
pipetest.zip

I still get the same error.

My code:

km.pipe.ts

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

@Pipe({
  name: 'toKm'
})
export class ToKm {
  transform(value, args) {
    let newValue = ""; 
    if (value >= 1000) {
      return (value / 1000).toFixed(1);
    } else if (value < 0 || isNaN(Number(value))) {
      return "0";
    } else {
      return value.toFixed(1);
    }
  }
}

app.module.ts:

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {ToKm} from "./pipes/km.pipe";

@NgModule({ 
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        ToKm
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

home.component.ts:

import { Component, OnInit } from "@angular/core";
import {ToKm} from "../pipes/km.pipe";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    private startingDistance: number = 100;

    constructor(public toKm : ToKm) {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        // Init your component properties here.
    }
}

And finally home.component.html:

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page">

    <StackLayout orientation="vertical" horizontalAlignment="center" verticalAlignment="center">

        <Label text="my pipe test"></Label>
        <Label [text]="startingDistance | toKm"></Label>

    </StackLayout>

</GridLayout>

[tsonevn]

Hi @xjpmauricio,
You should declare the pipe in a home.module.ts file, where is also the declaration of the HomeComponent, and remove the ToKm from the app.module.ts file's declarations. For example:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import {ToKm} from "../pipes/km.pipe";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";

@NgModule({
    imports: [
        NativeScriptCommonModule,
        HomeRoutingModule
    ],
    declarations: [
        HomeComponent,
        ToKm
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }

[xjpmauricio]

Hi @tsonevn, I removed all references to the pipe from app.module.ts and home.component.ts, I changed home.module.ts like you said and now it works. Thanks!!!