***** This post is outdated, please refer to here for latest updates*****

Refer to my article on “Create a Globally Available Custom Pipe in Angular 2”

We can create global available pipes by extending PLATFORM_PIPES. Well, this is working fine in RC 4, there is another way to extend the PLATFORM_PIPES.

Alternative: use CompilerConfig

According to the Angular2 official change log:

PLATFORM_PIPES and PLATFORM_DIRECTIVES now are fields on CompilerConfig. Instead of providing a binding to these tokens, provide a binding for CompilerConfig instead.

So, you can actually extends PLATFORM_PIPES in CompilerConfig during bootstrap like this:-

// main.ts import { bootstrap } from ‘@angular/platform-browser-dynamic’; import { provide } from ‘@angular/core’;

import { AppComponent } from ‘./app.component’;

import { CompilerConfig } from ' // import compiler configimport { CompilerConfig } from ' @angular/compiler ';

import { COMMON_DIRECTIVES, COMMON_PIPES } from ' // Angular built in directives and pipesimport { COMMON_DIRECTIVES, COMMON_PIPES } from ' @angular/common '; // our custom pipe

import { CapitalizePipe } from ‘./capitalize.pipe’; bootstrap(AppComponent, [ // provide our version of compiler config

provide(CompilerConfig, {

useValue: new CompilerConfig({

platformPipes: [...COMMON_PIPES, TranslatePipe],

platformDirectives: [...COMMON_DIRECTIVES],

genDebugInfo: true, // optional if you want to view debug info

})

}),

]);

Live example here: https://plnkr.co/edit/S96Jkn?p=preview

Please notes that you must provide the platformDirectives as well because by default no built in pipes or directives will be included when you instantiate CompilerConfig. You need to import COMMON_DIRECTIVES, COMMON_PIPES and do it yourself. Else you’ll get tons of errors (NgIf not found, Uppercase pipe not found, etc).

However, both PLATFORM_PIPES and CompilerConfig will be deprecated soon as well …

Yes, that’s right. CompilerConfig will be deprecated in future release. (most likely from next beta/ final release onward? As the changes has been merged to master). Deprecated warning message will be thrown. Here is the warning message:

Passing a CompilerConfig to “bootstrap()” as provider is deprecated. Pass the provider via the new parameter “compilerOptions” of “bootstrap()” instead.`);

or if you use PLATFORM_PIPES directly, then you’ll get this:

Passing PLATFORM_PIPES to “bootstrap()” as provider is deprecated. Use the new parameter “pipes” of “bootstrap()” instead.

What does the warning mean?

It means, it’s deprecated, please don’t use it anymore, migrate asap. Lol.

Digging a little bit on the bootstrap() code here. Seems like in future release, you can do something like this during bootstrap:

// main.ts bootstrap(AppComponent, // instead of arrays, it accept an object

{

providers: any[],

directives: any[],

pipes: any[],

modules: any[],

precompile: any[],

compilerOptions: CompilerOptions

});

Mean we can either pass in pipes using the pipes params or compilerOptions.

Plus, there will be a new @AppModules annotation be introduced.

There will be a new annotation introduced call @AppModules and the code has been merged to master as of the date this article is written. (Issue #9726)

AppModules introduce a way to group providers, platform directives/pipes and component factories on a higher level than components.

Take a look the design doc as well or wait for Angular official document or my article, maybe. Heh.

So, what should you do now?

Stay calm. Do nothing. Nothing wrong with your application now. Just wait and continue to watch your favourite TV shows.