6

My Angular architecture is composed of 3 modules.

  • AppModule (where the app prensetation and logic resides)
  • CoreModule (Contains my services to access API)
  • SharedModule (Contains my models, pipes, directives, etc...)

I want to add a new pipe in my SharedModule, so I create it and then add it to the declarations and exports fields of the SharedModule's NgModule decorator.

Then, in my AppModule, I import the SharedModule and should have access to my pipes. But, there the thing, I can't. Instead, I have the following error:

Uncaught Error: Template parse errors: The pipe 'rankingposition' could not be found

There is the code:

rankingposition.pipe.ts

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

@Pipe({ name: 'rankingposition' })
export class RankingPositionPipe implements PipeTransform {
    transform(value: any, ...args: any[]) {
        // Do stuff    
    }
}

shared.module.ts

import { NgModule } from "@angular/core";
import { RankingPositionPipe } from "@app/shared/pipes/ranking-position.pipe";

@NgModule({
    declarations: [RankingPositionPipe],
    exports: [RankingPositionPipe]
})
export class SharedModule {}

app.module.ts

import { NgModule } from '@angular/core';
...
import { SharedModule } from '@app/shared/shared.module';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    SharedModule
  ],
  providers: [],
  bootstrap: [...]
})
export class AppModule { }

Edit: Add my component code:

ranking.component.ts

import { Component } from "@angular/core";
import { CharacterModel } from "@app/shared/models/character.model";

@Component({
    selector: 'ranking',
    templateUrl: './ranking.component.html'
})
export class RankingComponent {
    public characters: Array<CharacterModel>;

    constructor() {
        this.characters = new Array<CharacterModel>();
    }
}

ranking.component.html

<div class="card">
  <div class="card-header">
    Ranking
  </div>
  <div class="card-body">
    <ul>
      <li *ngFor="let character of characters; let i = index">
        {{ character.level | rankingposition }}
      </li>
    </ul>
  </div>
</div>

Did I miss something?

Eastrall
  • 7,609
  • 1
  • 16
  • 30
  • Do you use that pipe in component declared directly in `AppModule`? – Martin Adámek Sep 23 '18 at 12:35
  • you has import { RankingPositionPipe } from " **@app** /shared/pipes/ranking-position.pipe"; I think that must be from ./shared/pipes/ranking-position.pipe – Eliseo Sep 23 '18 at 13:28
  • 2
    The author may have [set up a TypeScript import path alias](https://decembersoft.com/posts/say-goodbye-to-relative-paths-in-typescript-imports/). – Alex Peters Sep 23 '18 at 13:46
  • @AlexPeters Indeed, I've set path alises in my tsconfig.json. – Eastrall Sep 23 '18 at 13:47
  • Can you try directly declaring the rankingposition pipe in declarations of App Module? – Chirag Rupani Sep 23 '18 at 14:13
  • That's odd, I've added the `RankingPositionPipe` to the `AppModule` declarations array and still have the same error. – Eastrall Sep 23 '18 at 15:12
  • 1
    You said 'Yes the RankingComponent belongs to the AppModule. It is imported in another module named AppRoutingModule that defines the routes of the application'. In that case you should import the Pipe in `AppRoutingModule` – David Sep 23 '18 at 17:22
  • I have imported the `SharedModule` into the `AppRoutingModule` where the components of my app are defined and it works now. So, all pipes and directives **must** be declared in the same module as the components right ? – Eastrall Sep 23 '18 at 17:29
  • 1
    Can you add an answer to your question explaining what was wrong and how did you've fixed it? 10x – benshabatnoam Dec 27 '18 at 14:14

0 Answers0