how to override directive definitions in angular 2

Question

It is possible in angular 1 to decorate (override) directive definitions.

This is explained here: http://www.bennadel.com/blog/2926-overriding-directive-definitions-in-angularjs.htm

There is a builtin function

angular.module( "X" ).decorator(

for this.

In angular2 we don't have modules. The recommended way is to use typescript modules.

How will it be possible to decorate(override) directives in angular2?

The main reason i want to do this, is for customizations, when i deploy my app in a couple of sites.

Let's say that i have a bundle.js with all my app, I want then just to drop in a customer.js with a bunch of customizations, instead of changing and rebuilding my existing bundle.js for every site deployment.

Let's add a concrete example from the tour of heroes: I defined my app component in a javascript file:

import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';

@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="#hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
  `,

  directives: [HeroDetailComponent],
  providers: [HeroService]
})

I want to be able in another javascript file to switch the HeroDetailComponent with another component CustomHeroDetailComponent.

How is this possible?

Answer 1

There is no direct support for this AFAIK. I guess the underlaying issue is the same as https://github.com/angular/angular/issues/5622

As a possible workaround, you can create a file that exports all your components and in the component source file you import from there; Then you can change the bindings by replacing this exporting file.

It is ugly because all components start depending on that global file.