title: Override or opt-out from Angular 2 directive/component compilation
body: <p>The question considers any environment where components should be compiled on application-wide condition (platform-dependent builds). Thus the solution may borrow mocking techniques from Angular 2 testing but should be applied to production (including AoT).</p>
  
  <p>Considering that we have an existing client-side browser application, we may want to disable the compilation some of components on other platforms or override the components entirely (Angular Universal server-side rendering or mobile application).</p>
  
  <p>Some of directives and components  shouldn't be compiled on the other platform, because they are undesirable. I.e</p>
  
  <pre><code>  &lt;client-side-only&gt;fallback HTML contents&lt;/client-side-only&gt;
  </code></pre>
  
  <p>should remain unchanged after application initialization.</p>
  
  <p>It is necessary to cover two cases:</p>
  
  <ul>
  <li>Prevent directive/component compilation</li>
  <li>Override a directive/component with a replacement or a stub that has same selector</li>
  </ul>
  
  <p>In AngularJS, it would be as easy as conditionally adding a directive to the app and using it wherever needed:</p>
  
  <pre><code>.directive('clientSideOnly', () =&gt; ({ terminal: true, priority: 10000 }));
  </code></pre>
  
  <p>Or modifying the behaviour of defined components/directives with decorator:</p>
  
  <pre><code>.decorator('clientSideOnlyComponentDirective', ($delegate) =&gt; ...));
  </code></pre>
  
  <p>Are there counterparts of these Angular 1.x tricks in Angular 2?</p>
  
  <p>How can directives and components be overridden or prevented from compilation in Angular 2 with minimum amount of WET code?</p>