Angular 2 - Pipe reuse in multiple modules - error not found or duplicate definition

Question

Im working on angular 2 final release.

I have declared two modules: main app and one for the settings page.

The main module is declaring globally pipes. This module is also including the settings module.

app.module.ts

@NgModule({
    imports: [BrowserModule, HttpModule, routing, FormsModule, SettingsModule],
    declarations: [AppComponent, JsonStringifyPipe],
    bootstrap: [AppComponent]
})
export class AppModule { }

settings.module.ts

@NgModule({
    imports: [CommonModule, HttpModule, FormsModule, routing],
    declarations: [SettingsComponent],
    exports: [SettingsComponent],
    providers: []
})
export class SettingsModule { }

When trying to use the pipe in the settings module I'm getting an error that the pipe could not be found.

zone.min.js?cb=bdf3d3f:1 Unhandled Promise rejection: Template parse errors:
The pipe 'jsonStringify' could not be found ("         <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>[ERROR ->]{{user | jsonStringify}}</td>
                    <td>{{ user.registered }}</td>
                </tr"): ManageSettingsComponent@44:24 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse

If I include the pipe into the settings module it complains about the two modules having same pipe.

zone.min.js?cb=bdf3d3f:1 Error: Error: Type JsonStringifyPipe is part of the declarations of 2 modules: SettingsModule and AppModule! Please consider moving JsonStringifyPipe to a higher module that imports SettingsModule and AppModule. You can also create a new NgModule that exports and includes JsonStringifyPipe then import that NgModule in SettingsModule and AppModule.

json-stringify.pipe.ts

@Pipe({name: 'jsonStringify'})
export class JsonStringifyPipe implements PipeTransform {
    transform(object) {
        // Return object as a string
        return JSON.stringify(object);
    }
}

Any idea about this?

Hamid Asghari · Accepted Answer · 2018-08-20 14:20:24Z

89

If you want to use the pipe in a different module, then add the module where the pipe is declared to imports: [...] of the module where you want to re-use the pipe, instead of adding it to declarations: [] of multiple modules.

For example:

@NgModule({
    imports: [],
    declarations: [JsonStringifyPipe],
    exports: [JsonStringifyPipe]
})
export class JsonStringifyModule { }

@NgModule({
    imports: [
      BrowserModule, HttpModule, routing, FormsModule, SettingsModule,
      JsonStringifyModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
    imports: [
       CommonModule, HttpModule, FormsModule, routing, 
       JsonStringifyModule],
    declarations: [SettingsComponent],
    exports: [SettingsComponent],
    providers: []
})
export class SettingsModule { }

edited Aug 20, 2018 at 14:20

Hamid Asghari

5,8894 gold badges27 silver badges34 bronze badges

answered Oct 13, 2016 at 7:42

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

kitimenpolku Over a year ago

Thanks for the answer... Why do I need to create a module for pipes? Why defining the pipe in the global module is not enough to make the pipe available to other modules?

Günter Zöchbauer Over a year ago

Why is a good question. Because Angular2 is designed this way. I guess that doesn't help much ;-). The NgModule concept was introduced to make lazy loading work with offline template compilation and I guess they had good reasons to design it this way. Angular just needs to know where components, directives, pipes, and services are used to be able to create small and efficient code that works with lazy loading and offline compilation.

Günter Zöchbauer Over a year ago

You don't need to create a module for every pipe. You can put as many reusable components, directives, pipes, and services in such a module. But you need to import it everywhere where one of these parts are used.

kitimenpolku Over a year ago

I think that I just confused things that you can do in components and modules. Components seems to have a hierarchy - services registered as providers for a component can be inherit by other components. That does not apply to modules. In my case, app.module and settings.module are independent modules. App.module knows only exports from settings.module. Settings.module does not know about App.module. Hopefully Im understanding it properly.

Günter Zöchbauer Over a year ago

Sounds like you got it ;-)

|

Collectives™ on Stack Overflow

Angular 2 - Pipe reuse in multiple modules - error not found or duplicate definition

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related