web-dev-qa-db-fra.com

Pipe inattendue 'ValuesPipe' importée par le module 'HomieModule'

Je rencontre des problèmes lors de l'importation d'un tuyau avec cette configuration: J'ai un tableau de bord.Module qui se connecte à Homie.Module et Services.Module via Dashboard-routing.Module

C'est mon Dashboard.Module

import { DashboardRoutingModule } from './dashboard-routing.module';    
import { ValuesPipe } from './values-pipe.pipe';

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule],
  providers:    [ HomieService, ServiceService ],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe],
  bootstrap:    [ DashboardComponent ]
})
export class DashboardModule { }

Homie.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,
    HomieRoutingModule,
    FormsModule,
    Ng2SearchPipeModule,
    ValuesPipe
  ],
  declarations: [HomieListComponent, HomieDetailComponent]
})
export class HomieModule { }

Service.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,
    ServiceRoutingModule,
    FormsModule,
    Ng2SearchPipeModule,
    ValuesPipe
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }

Erreur

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.
Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.

Lorsque je déclare ma pipe dans les modules Homie et Service, j'obtiens le message d'erreur: pipe déclarée dans deux modules. C'est pourquoi j'ai déplacé ma pipe vers Dashboard.module qui est le module qui se connecte aux deux (Parent).

angularimportmodulepipe
9
Alejandro Cordoba

Par convention de conception, la conception implémentée est incorrecte. Si vous souhaitez partager des tuyaux, des composants et des directives communs à vos modules de projet, vous devez utiliser le concept SharedModule.

Dans votre solution, vous exportez correctement les tuyaux, mais de cette façon, cela ne fonctionne pas.

Une fois que vous avez exporté common pipe(s), component(s) and directive(s) après l'avoir fait, vous devez import that entire module from where you have exported such things to other modules where you want to use them. Faites de même,

1) Créez un module partagé quelque part dans le répertoire de votre projet

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';

import { ValuesPipe}         from './../values-pipe.pipe';

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

2) Importez shareModule dans Service.Module

import { SharedModule } from '../shared/shared.module';
...
...

@NgModule({
  imports: [
    CommonModule,
    ...
    SharedModule
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }

Vous êtes maintenant prêt à utiliser le tuyau exporté dans Service Module.

En savoir plus sur shareModule

26
micronyks

J'ai dû ajouter le pipe donc un module de service pour le faire fonctionner avec Angular7. Cela a fonctionné pour moi:

https://alligator.io/angular/providers-shared-modules/

0
Peter Drinnan