Using custom pipes in lazy modules

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Custom pipes declared in the main app module are not seen in the lazy module components - “Pipe xxx could not be found…” error. If the pipes are declared in the lazy module instead angular behaves as expected. Expected behavior

Declarations of top level modules should propagate to all components. Please tell us about your environment:

os x

• Angular version: 2.0.X 2.01
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] any
• Language: [all | TypeScript X.X | ES6/7 | ES5] 2.0
• Node (for AoT issues): node --version =
  6.7

[homofortis]

Oh man, this framework is really becoming over-complicated for a web frontend. If this keeps on going it may die of sophistication fatigue 😛

[RoxKilly]

This is expected behavior. The template parser will recognize a directive, component or pipe if and only if it was listed in the declarations array of the current NgModule or exported by a module that the current NgModule imports.

If you wish for your pipe to be accessible from multiple modules, declare it in a module that will be imported by the others. For instance, you could have a SharedModule that exports all directives, components and pipes that you want to share.

@NgModule({
    imports: [CommonModule],
    exports: [SharedPipe, SharedDirective, SharedComponent]
})
export class SharedModule{
    static forRoot() {
        return {
            ngModule: SharedModule,
            providers: [ //services that you want to share across modules
                SharedService,
                SharedService2
            ]
        }
    }
}

Your root AppModule should list SharedModule.forRoot() in its imports array. Your other modules (including lazy-loaded modules) should list SharedModule in their imports arrays.