Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 RC.5 Shared Module can't find pipes

I'm updating my app to use a module structure and I ran into a weird issue when trying to add my pipe component into a shared module. From what I've read I have everything set up right, so I must be missing something little.

Error: Unhandled Promise rejection: Template parse errors: The pipe 'cmgTitleize' could not be found

I have a BrowseModule, this module declares a ProjectCardComponent which has a template that uses the cmgTitleize pipe. To provide access to the TitleizePipe I import my SharedModule.

@NgModule({
  declarations: [
    ...,
    ProjectCardComponent
  ],
  imports: [
    ...,
    SharedModule
  ],
  providers: [
    ...
  ]
})

export class BrowseModule { }

The SharedModule, imports the PipesModule:

@NgModule({
  declarations: [
    ...
  ],
  exports: [
    ...
  ],
  imports: [
    ...,
    PipesModule
  ]
})

export class SharedModule { }

PipesModule declares and exports the TitelizePipe:

@NgModule({
  declarations: [
    ...
    TitleizePipe
  ],
  exports: [
    ...
    TitleizePipe
  ]
})

export class PipesModule { }

Lastly for a sanity check heres the TitleizePipe:

@Pipe({
  name: 'cmgTitleize'
})

export class TitleizePipe implements PipeTransform {
  ...
}
like image 270
efarley Avatar asked Feb 07 '23 05:02

efarley


2 Answers

Looks like I just needed to also export the PipesModule in the SharedModule

like image 152
efarley Avatar answered Feb 13 '23 06:02

efarley


If you're using the static "forRoot()" in a shared module, you still need to export the pipes or any other required module:

@NgModule({
    exports: [
        MyPipesModule                   //<---------------- HERE
    ]
})
export class SharedModule { 
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [
                MySingletonServices
            ]
        };
    }
}

And then you just import it in your main app module:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        SharedModule.forRoot()       // <------------
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
like image 42
Luis Aceituno Avatar answered Feb 13 '23 07:02

Luis Aceituno