TypeScript - Angular 6 - Benutzerdefinierte Pipes im Shared-Modul werden nicht exportiert

Meine Angular-Architektur besteht aus 3 Modulen.

• AppModule (wo die Anwendungspräsentation und -logik besteht)
• CoreModule (Enthält meine Dienste zum Zugriff auf die API)
• SharedModule (Enthält meine Modelle, Pipes, Direktiven usw...)

Ich möchte eine neue Pipe in meinem SharedModule hinzufügen, also erstelle ich sie und füge sie dann den Feldern declarations und exports des NgModule-Dekorators des SharedModule hinzu.

Dann importiere ich in meinem AppModule das SharedModule und sollte Zugriff auf meine Pipes haben. Aber hier ist das Problem, ich kann nicht. Stattdessen bekomme ich folgenden Fehler:

Ungefangener Fehler: Template-Parse-Fehler: Die Pipe 'rankingposition' konnte nicht gefunden werden

Hier ist der 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 { }

Bearbeiten: Meinen Komponenten-Code hinzufügen:

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>

Habe ich etwas verpasst?