Angular2 PLATFORM_PIPES (Globally Available Custom Pipe) will be deprecated soon

Datetime:2016-08-22 22:21:34          Topic: AngularJS  Bootstrap           Share

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 compiler config during bootstrap like this:-

// main.ts
import { bootstrap } from [email protected]

/platform-browser-dynamic’; import { provide } from[email protected]/core’;

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

import { CompilerConfig } from ' @angular/compiler

';

// Angular built in directives and pipes
import { 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, if you use instantiate new compiler config, no built in pipes or directives will be injected. 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. Deprecated warning message will be thrown (most likely from next beta/ final release onward? as the changes has been merged to master ). Here is the warning messages:

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:

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:

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.





About List