Why can't my Angular2 rc5 component find my shared pipe?

Question

I'm working on updating a project to rc5 and began by creating a master module that was loading all of the directives, pipes, etc for my entire application. I got that up and running and all was well. I'm now trying to split that master module into smaller modules that makes sense for the structure and use of my app. I wanted my app to have a module that just stores all of the pipes that are shared by multiple components so I made this module:

pipes.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, provideForms } from '@angular/forms';

import { AbbrDay } from './abbr-day.pipe'
import { TitleCase } from './title-case.pipe'
import { ToDate } from './to-date.pipe'

@NgModule({
    declarations: [
        AbbrDay,
        TitleCase,
        ToDate
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    providers: [
        provideForms
    ]
})

export class PipesModule {

}

In another module I want to use the TitleCase pipe, so I tried importing the PipesModule:

calendar.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, provideForms } from '@angular/forms';
import { MODAL_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
import { Schedule } from 'primeng/primeng';

import { 
    AppointmentConfirmComponent, 
    AppointmentDetailComponent,
    CalendarBodyComponent,
    CalendarComponent,
    CalendarService
} from './'

import { PipesModule } from '../../shared/pipes/pipes.module'

import { SearchIdentitiesComponent } from '../identity'

@NgModule({
    declarations: [
        AppointmentConfirmComponent, 
        AppointmentDetailComponent,
        CalendarBodyComponent,
        CalendarComponent,
        MODAL_DIRECTIVES,
        Schedule,
        SearchIdentitiesComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        PipesModule
    ],
    providers: [
        provideForms
    ]
})

export class CalendarModule {

}

When I run the application I get this error during runtime:

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'titleCase' could not be found ("ties" 
                  class="tag black-text pointer" [ngClass]="{'strike': participantsDiff()}">[ERROR ->]
                {{identityHelperService.getName(identity) | titleCase}}
              </span>

Am I missing some other provider that my pipes module needs to offer its pipes to other modules?

Answer 1

Looks like you just need to add exports to your PipesModule

exports: [
    AbbrDay,
    TitleCase,
    ToDate,
]

You should also be using CommonModule rather than BrowserModule