File structure for custom components and pipes


I’m currently working on a anuglar2 ionic2 (version rc.1) project. I followed the file structure laid out in the changeLog. Meaning I have:


However, I have custom popover and pipe components that live in the .ts file of the pages that use each respectively. For example:

@Pipe({name: 'sortEmployee'})
export class customPipe implements PipeTransform {

    templateUrl: 'randomPage.html'
export class RandomPage {...}

would be in the randomPage.ts file.

It seems intuitive that these custom components should live in their own folders. However, it’s unclear to me whether or I need a general “custom things” folder, or if I should have a general “non-page components” folder along with a “pipe” folder.

The reason I ask is because in the changeLog it says:

7.Import and add each of your custom components and pipes to the declarations array in src/app/app.module.ts.

I get an error when I try to import the popover components that live in a page using:

import { RandomPage, Popover1, Popover2 } from '../pages/randomPage/randomPage';

It says Popover1, and Popover2 are not exportable.

This question is somewhat vague but it really boils down to this:

How do I structure my files using custom components/pipes?


I think you are best off giving each pipe its own file, instead of having roommates.