title: Angular Pipe not working on child routes
body: <p>I have a very simple Pipe in Angular 5</p>
  
  <pre><code>import { Pipe, Injectable } from '@angular/core';
  
  @Pipe({
      name: "default"
  })
  @Injectable()
  export class DefaultPipe {
      transform(value: string, fallback: string): string {
          let image = "";
          if (value) {
              image = value;
          } else {
              image = fallback;
          }
          return image;
      }
  }
  </code></pre>
  
  <p>and I use it in a very simple way just for demonstration</p>
  
  <pre><code>&lt;div&gt;
      {{ 'somthing' | default }}
  &lt;/div&gt; 
  </code></pre>
  
  <p>I have also added in provider section in app.module.ts</p>
  
  <pre><code>@NgModule({
      declarations: [
          AppComponent,
          DefaultPipe // &lt;-- Here
      ],
      imports: [
          ....
      ],
      providers: [
          ....
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>when you use it in an normal component such as </p>
  
  <blockquote>
    <p>app.component.html</p>
  </blockquote>
  
  <p>it works fine, but if you use it in a component which is used in a child route it gives this error:</p>
  
  <blockquote>
    <p>compiler.js:486 Uncaught Error: Template parse errors: The pipe
    'default' could not be found ("</p>
    
    <p>
        {{[ERROR ->] 'somthing' | default }} "): ng:///AppRoutingModule/LoginComponent.html@75:6
        at syntaxError (compiler.js:486)
        at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse
    (compiler.js:24674)
        at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34629)
        at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate
    (compiler.js:34604)
        at compiler.js:34505
        at Set.forEach ()
        at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents
    (compiler.js:34505)
        at compiler.js:34375
        at Object.then (compiler.js:475)
        at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents
    (compiler.js:34374)</p>
  </blockquote>
  
  <p><strong>To Solve:</strong></p>
  
  <p>I added this module as <em>share.module.ts</em></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { DefaultPipe } from './core/pipes/default.pipe';
  
  @NgModule({
      declarations: [DefaultPipe],
      exports: [DefaultPipe]
  })
  export class SharedModule { }
  </code></pre>
  
  <p>and used it in 2 places, one in <em>app.module.ts</em>:</p>
  
  <pre><code>@NgModule({
  declarations: [
      AppComponent,
  ],
  imports: [
      ...
      // other modules
      ...
      SharedModule
  ],
  providers: [
      ....
  ],
  bootstrap: [AppComponent]
  </code></pre>
  
  <p>})
  export class AppModule { }</p>
  
  <p>and one in <em>route.module.ts</em></p>
  
  <pre><code>@NgModule({
      declarations: [
          ....
      ],
      imports: [
          ....
          SharedModule
      ],
      exports: [
          RouterModule,
      ]
  })
  
  export class AppRoutingModule { }
  </code></pre>