title: Defining Angular Component inline, in routes?
body: <p>Currently I define my routes like so:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>export const myRoutes: Routes = [
      { path: '', component: MyComponent },
  ];
  </code></pre>
  
  <p>With a <code>RouterModules.forChild(myRoutes)</code> in my module.</p>
  
  <p>How do I define this component inline, with full inline template also?</p>
  
  <p>Looking for something like:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>{ path: '/foo', component: { template: '&lt;h1&gt;foo&lt;/h1&gt;' } }
  </code></pre>
  
  <p>EDIT: Attempt
  </p>
  
  <pre><code>{
      path: '/test', component: Component({
        template: '&lt;h1&gt;Foo&lt;/h1&gt;',
        styles: [':host {color: red}']
      })(class {})
  }
  </code></pre>
  
  <p>But got this error:</p>
  
  <blockquote>
    <p>Error: Component class_1 is not part of any NgModule or the module has not been imported into your module.</p>
  </blockquote>
  
  <p>Using: <code>[MyComponent, ...declarations]</code> where <code>declarations</code> is a <code>const</code> from filtering <code>myRoutes</code>, works, but only for <code>ng serve</code>. <code>ng build --prod</code> errors with:</p>
  
  <blockquote>
    <p>ERROR in : Unexpected value 'null' declared by the module</p>
  </blockquote>