An Angular 2 custom Component decorator which sets ViewEncapsulation.None to all components that use it.

base.component.ts

// angular
import {Component, ViewEncapsulation} from '@angular/core';

declare var Reflect: any;
const _reflect: any = Reflect;

// Usage:
// @BaseComponent({ etc... })

export function BaseComponent(metadata: any = {}) {
  return function(cls: any) {
    let annotations = _reflect.getMetadata('annotations', cls) || [];
    annotations.push(new Component(DecoratorUtils.getMetadata(metadata)));
    _reflect.defineMetadata('annotations', annotations, cls);
    return cls;
  };
}


export class DecoratorUtils {
  public static getMetadata(metadata: any = {}) {
    metadata.encapsulation = ViewEncapsulation.None;
    return metadata;
  }

  public static annotateComponent(cls: any, metadata: any = {}) {
    let annotations = _reflect.getMetadata('annotations', cls) || [];
    annotations.push(new Component(DecoratorUtils.getMetadata(metadata)));
    _reflect.defineMetadata('annotations', annotations, cls);
    return cls;
  }
}

How to use?

// Usage:
// @basecomponent({ etc... })

Have you tried using such custom annotation with AOT compilation enabled? Because I receive
Please add a @Pipe/@Directive/@Component annotation
error when compiling with AOT enabled and wonder how to bypass/satisfy AOT verifications.

Any update on this? I'm also facing issue with AOT build. Any help would be really appreciable.

Maybe this would help guys: https://blog.angularindepth.com/implementing-custom-component-decorator-in-angular-4d037d5a3f0d

I receive
Please add a @Pipe/@Directive/@Component annotation
even following the tips in @davidmpaz link