6
votes

Ionic 4 - Pipe introuvable

J'ai 2 pages pour utiliser un tube personnalisé. J'ai créé un dossier dans src / app nommé pipes. Et créé un fichier pipes.module.ts

import { NgModule } from '@angular/core';
//import custom pipes here
@NgModule({
    declarations: [
        TranslatePipe
    ],
    imports: [],
    exports: [
        TranslatePipe
    ]
})
export class PipesModule {}

et je l'importe à partir de mon premier fichier de module de composant devices.module.ts

import { PipesModule } from '../pipes/pipes.module'

@NgModule({
  imports: [
    PipesModule,
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    ComponentsModule,
    MatPaginatorModule,


  ],
  declarations: [HomePage]
})
export class HomePageModule {}

ce composant fonctionne bien quand j'utilise pipe.

mais j'ai aussi un autre composant. home.module.ts

import { PipesModule } from '../pipes/pipes.module';

@NgModule({
  imports: [
    ...
    PipesModule
  ],
  declarations: [DevicesPage, ]
})
export class DevicesPageModule {}

j'appelle la page d'accueil depuis la page des appareils avec un bouton. Mais j'obtiens une erreur lorsque je clique sur le bouton.

pipes.module.ts;

import { NgModule } from '@angular/core';
import { TranslatePipe } from './translate.pipe';
@NgModule({
    declarations: [
        TranslatePipe
    ],
    imports: [],
    exports: [
        TranslatePipe
    ]
})
export class PipesModule {}

ionic-framework ionic4

0 commentaires

5 Réponses :

1
votes

J'ai réalisé que j'avais oublié d'importer PipesModule pour les composants enfants dans la page d'accueil. Problème résolu après l'importation

2 commentaires

Peux-tu m'aider avec ceci? Comment avez-vous importé PipesModule pour les composants enfants? Je n'ai pas de fichier appelé PipesModule.

@aleksejjj j'ai créé un fichier nommé pipes. et créé un fichier .ts personnalisé nommé pipes.module.ts. Je vais mettre à jour mon message pour afficher le contenu du fichier pipes.module.ts.

3
votes

J'ai rencontré le même problème dans l'application ionic-V4. J'ai résolu mon problème comme ça. voir ce code, vous saurez. J'ai supprimé le tube du fichier app.module.ts.

Créez un nouveau tube en utilisant la commande ci-dessous:

<h2>{{data|translatePipe}}</h2>

Puis importez ce tube dans le fichier home.module.ts.

declarations: [HomePage, FirstCapsPipe]

Incluez-le ensuite dans les déclarations du fichier home.module.ts.

import { FirstCapsPipe } from '../first-caps.pipe';

home.html p>

ionic g pipe translatePipe

espérons que cela vous aidera :)

0 commentaires

2
votes

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 les pipes. p>

3 Troisièmement, créez un fichier dans le dossier pipes 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

2
votes

Solution Ionic 4:

Voici comment j'ai fait fonctionner le tuyau personnalisé dans Ionic 4 :

Création d'un tube personnalisé dans le dossier pipes du répertoire app en utilisant: pipe g ionique pluriel-singulier

REMARQUE: Vous pouvez créer le tube où vous le souhaitez dans le répertoire de votre projet, bien que je recommande de le placer dans tubes répertoire par souci d'organisation.

Dans le module de la page où je voulais utiliser ce tube, j'ai importé le tube et l'ai spécifié sous fournisseurs et déclarations , comme ça:

"@ionic/angular": "^4.7.1",
"@angular/core": "~8.1.2",

J'ai importé le tube dans le fichier TS de la page où je voulais utiliser le tube, comme ceci:

import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';

Déclaré le tube dans le constructeur de la même page, comme ceci:

constructeur (public pluralSingular: PluralSingularPipe) {}

Je l'ai utilisé dans mon fichier HTML, comme ceci:

{{numberOfRecords | pluralSingular: 'coupon': 'coupons'}}

Voilà!

POUR THE CURIOUS: Si cela peut vous aider, voici mes versions du fichier package.json :

import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes)
    ],
    providers: [
        PluralSingularPipe //---> Here 
    ],
    declarations: [PluralSingularPipe] //---> And here
})

0 commentaires

0
votes

économisez beaucoup de lectures et d'expériences en important simplement le tube sur chaque module dans lequel vous devez l'utiliser. Par exemple, si vous avez une page appelée home et que vous souhaitez utiliser le tube ici, allez dans home.module.ts et importez-le là-bas, ajoutez le tube dans les déclarations et dans les exportations et vous avez terminé!

Maintenant, si vous avez plusieurs tubes pour créer un module, vous pouvez même l'appeler allmypipes.module.ts. importez tous les tubes pertinents dans ce module et ajoutez-les aux déclarations et exportations, puis importez ce module dans chaque page (page.module.ts) où vous souhaitez utiliser l'un des tubes et vous avez terminé!

0 commentaires