Angular2 setting view encapsulation globally

Question

I've decided to set ViewEncapsulation to None for all my components in my project.

So, how can I set ViewEncapsulation.None globally to whole project? instead of setting it in each of my components decorator.

Note: Just for extra info, My deps are on RC.6

Edit: The 2nd solution provided by Günter Zöchbauer also works on 2.1.2

Answer 1

You can set default view encapsulation by passing a custom CompilerConfig. This feature was added in RC.2 (last item in the features list)

1. You can set it on NgModule level

this way doesn't work anymore

    @NgModule({
        // imports, declaration, bootstrap, etc..
        providers: [{
            provide: CompilerConfig, 
            useValue: new CompilerConfig({
                defaultEncapsulation: ViewEncapsulation.None
            })
        }]
    })
    export class AppModule {}

Plunker example

2. Set it on bootstrap level (Thanks to yurzui)

platformBrowserDynamic().bootstrapModule(AppModule, [
    {
        defaultEncapsulation: ViewEncapsulation.None
    }
]);

Please note that you ofc need to import ViewEncapsulation from @angular/core

3. In more recent Angular versions this can be set in compiler options

Caution: I haven't tried this myself yet. This is just how I interpreted the docs:

In tsconfig.json

{ 
  ...,
  angularCompilerOptions: {
   defaultEncapsulation: 3;
  }
}
 

• https://angular.io/guide/angular-compiler-options
• https://angular.io/api/core/CompilerOptions
• https://angular.io/api/core/ViewEncapsulation