title: Angular Uncaught Error: Template parse errors: is not a known element
body: <p>I am trying to use babel standalone inside a react app to transpile Angular TypeScript. The transpiling does &quot;work&quot; however I get an error when I try to import a component and use it's selector inside the template of another component.</p>
  <p>This is the error I get:</p>
  <pre><code>Uncaught Error: Template parse errors:
  'search-bar' is not a known element:
  1. If 'search-bar' is an Angular component, then verify that it is part of this module.
  2. If 'search-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  </code></pre>
  <p>SearchBar Component (user code):</p>
  <pre><code>// ng is on the window object
  const { Component, NgModule, Output, EventEmitter } = ng.core;
  const { CommonModule } = ng.common;
  
  @Component({
    selector: 'search-bar',
    template: `&lt;div&gt;Search Bar&lt;/div&gt;`,
  })
  @NgModule({
    declarations: [SearchBar],
    exports: [SearchBar]
  })
  class SearchBar {}
  
  export default SearchBar;
  
  </code></pre>
  <p>App Component (user code):</p>
  <pre><code>const { Component, NgModule, VERSION } = ng.core;
  const { CommonModule } = ng.common;
  
  // Note: The online editor does not need a path to the component :)
  import SearchBar from 'SearchBar.ts';
  
  @NgModule({
    imports: [
      CommonModule,
      SearchBar,
    ],
    declarations: [AppComponent, SearchBar],
  })
  @Component({
    selector: 'my-app',
    template: `&lt;search-bar&gt;&lt;/search-bar&gt;`
  })
  export default class AppComponent {
  
  }
  
  </code></pre>
  <p>Please note, I am creating an online code editor so yes I need to use babel standalone. Here is my babel config for typescript:</p>
  <p>(from my react app)</p>
  <pre><code>const TS_OPTIONS = {
    presets: [
      ['typescript', { allExtensions: true }],
      ['es2017', { 'modules': false }],
    ],
    plugins: [
      [&quot;proposal-decorators&quot;, { &quot;legacy&quot;: true }],
      [&quot;proposal-class-properties&quot;, { &quot;loose&quot; : true }],
      'transform-modules-commonjs',
    ],
  };
  </code></pre>
  <p>version of Babel:</p>
  <pre><code>https://unpkg.com/@babel/standalone@7.12.9/babel.min.js
  </code></pre>
  <p>My transpile function (simplified, also from my react app):</p>
  <pre><code>export default function transpile(myCode) {
    const { code } = Babel.transform(myCode, TS_OPTIONS);
  
    return myCode;
  }
  </code></pre>
  <p>What am I missing?</p>