4
votes

Le tuyau angulaire n'a pas pu être trouvé avec l'ionic 4

Récemment, j'ai créé mon propre tube sous le nom ionic4: StatusairportPipe . Puis je l'ai importé dans app module.ts , maintenant quand j'essaie de l'utiliser, j'ai des erreurs:

   import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouteReuseStrategy } from '@angular/router';

    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    import { SplashScreen } from '@ionic-native/splash-screen/ngx';
    import { StatusBar } from '@ionic-native/status-bar/ngx';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { HTTP } from '@ionic-native/http/ngx';
    import { Network } from '@ionic-native/network/ngx';
    import { StatusairportPipe } from './statusairport.pipe';

    @NgModule({
      declarations:
       [AppComponent, 
        StatusairportPipe

      ],
      entryComponents: [],

      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
        exports:[
    StatusairportPipe,
    AliPipe
  ],
      providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        HTTP,
        Network
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

StatusairportPipe model ts

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

@Pipe({
  name: 'my'
})
export class StatusairportPipe implements PipeTransform {

  public states: Object = {
    'scheduled':   'Ù…Ø¬Ø¯ÙˆÙ„Ø©',

  };
  transform(value: string, ...args) {
    // This is our catch for data that hasn't interpolated
    // from its source yet, a basic async fix.
    if(value == null) return;
// Otherwise, lookup the state name from the acronym
    if(this.states[value]){
      return this.states[value];
    } else {
      return value;
    }
  }

}

app.module.ts

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'my' could not be found ("
            <td text-center>{{item?.flight.aircraft.model.code}}</td>
            <td text-right>{{[ERROR ->]item?.flight.status.generic.status.text | my}}</td>

            </tr>

angular angular-pipe

0 commentaires

3 Réponses :

2
votes

J'ai déjà eu ce problème et je viens d'ajouter le tube sur l'exportation du module pour résoudre le problème.

Essayez ceci:

@NgModule({
  declarations:
   [AppComponent, 
    StatusairportPipe

  ],
  entryComponents: [],

  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HTTP,
    Network
  ],
  bootstrap: [AppComponent],
  exports: [ StatusairportPipe]
})
  export class AppModule {}

Faites-moi savoir si Ça marche. Bonne chance.

3 commentaires

Merci mon frère pour ta réponse. Si vous voyez mon code ci-dessus, j'ai déjà ajouté 'StatusairportPipe' dans mon modèle d'application! Et c'est le même problème

Donc, vous avez ajouté que dans les déclarations , je vous suggère de l'ajouter également dans les exportations .

Avez-vous plus d'un module dans votre application?

1
votes

Je l'ai corrigé. quand j'ai créé mon propre tube dans ionic 4 il vous suffit de l'ajouter au tube que vous avez déjà créé dans le module de page que vous souhaitez utiliser. vous n'avez pas besoin d'ajouter dans app.module

0 commentaires

1
votes

J'espère que cela aidera quelqu'un d'autre.

1) Tout d'abord, créez le dossier pipes dans le dossier src / app (dans le dossier app).

2) Deuxièmement, sur cmd "ionic generate pipe pipes / searchfilter "=> cela générera deux fichiers dans des tubes.

3 Troisièmement, créez un fichier dans le dossier des tubes avec le nom" pipes.module.ts " et écrivez ci-dessous le code to => "pipes.module.ts"

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SearchfilterPipe } from './searchfilter.pipe';  //our pipe which we generate

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [SearchfilterPipe],
  exports: [SearchfilterPipe]
})
export class PipesModule { }

Maintenant, nous avons PipesModule, nous pouvons générer plus de tuyaux et les écrire dans pipesmodule. Nous n'importerons que PipesModule au lieu de tous les tuyaux.

4) Vous n'avez pas besoin d'importer PipesModule dans app.module.ts

5) Maintenant, allez à la page que vous souhaitez utiliser pipe et ouvrez par exemple "anasayfa.module.ts" et importez "PipesModule" et écrivez-le dans les importations @ngModel (il sera créé automatiquement) Veuillez faire attention, vous importerez PipesModule dans quelque chose.MODULE.TS pas quelque chose.page.ts

0 commentaires