typescript - Angular Error no capturado: Errores de análisis de plantilla: no es un elemento conocido

Estoy intentando usar Babel independiente dentro de una aplicación React para transpilar TypeScript de Angular. La transpilación sí "funciona", sin embargo, obtengo un error cuando intento importar un componente y usar su selector dentro de la plantilla de otro componente.

Este es el error que obtengo:

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.

Componente SearchBar (código del usuario):

// ng is on the window object
const { Component, NgModule, Output, EventEmitter } = ng.core;
const { CommonModule } = ng.common;

@Component({
  selector: 'search-bar',
  template: `<div>Search Bar</div>`,
})
@NgModule({
  declarations: [SearchBar],
  exports: [SearchBar]
})
class SearchBar {}

export default SearchBar;

Componente de la aplicación (código del usuario):

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: `<search-bar></search-bar>`
})
export default class AppComponent {

}

Tenga en cuenta, estoy creando un editor de código en línea, así que sí, necesito usar babel standalone. Aquí está mi configuración de babel para TypeScript:

(desde mi aplicación React)

const TS_OPTIONS = {
  presets: [
    ['typescript', { allExtensions: true }],
    ['es2017', { 'modules': false }],
  ],
  plugins: [
    ["proposal-decorators", { "legacy": true }],
    ["proposal-class-properties", { "loose" : true }],
    'transform-modules-commonjs',
  ],
};

versión de Babel:

https://unpkg.com/@babel/[email /babel.min.js

Mi función de transpilar (simplificada, también de mi aplicación React):

export default function transpile(myCode) {
  const { code } = Babel.transform(myCode, TS_OPTIONS);

  return myCode;
}

¿Qué me estoy perdiendo?

Respuesta #1

En algún momento del camino hice un desastre de las cosas y CodeMonkey señaló correctamente que no debería tener NgModule en mis componentes. Le daré crédito por la respuesta, pero solo por completitud en caso de que alguien quiera ver un ejemplo que funcione. Tenga en cuenta que hay alguna sintaxis específica de mi editor de código en línea (como que no es necesario un camino de archivo al importar componentes).

Componente principal con módulo:

// main.ts
// contains my module
const { Component, VERSION } = ng.core;
const { BrowserModule } = ng.platformBrowser;
const { NgModule } = ng.core;
const { CommonModule } = ng.common;

import AppComponent from 'App.ts';
import SearchBarComponent from 'SearchBar.ts';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
  ],
  declarations: [AppComponent, SearchBarComponent],
  bootstrap: [AppComponent],
  providers: []
})
class AppModule {}

const { platformBrowserDynamic } = ng.platformBrowserDynamic;

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

Componente de la aplicación:

// App.ts
const { Component } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  <h1 [innerHTML]="title"></h1>
  <search-bar></search-bar>`
})
export default class AppComponent {
  title;

  constructor() {}

  ngOnInit() {
    this.title= "Hello World!";
  }
}

Componente de Barra de Búsqueda:

// SearchBar.ts
const { Component } = ng.core;

@Component({
  selector: 'search-bar',
  template: `<h1>Search Bar</h1>`
})
export default class SearchBarComponent {}

Respuesta #2

Mi primer pensamiento al mirar este código es que no me he encontrado con una clase que sea tanto un módulo como un componente, mi sensación es que necesitan ser dos clases separadas.

// ng is on the window object
const { Component, NgModule, Output, EventEmitter } = ng.core;

@Component({
  selector: 'search-bar',
  template: `<div>Search Bar</div>`,
})
export class SearchBar {}

@NgModule({
  declarations: [SearchBar],
  exports: [SearchBar]
})
export class SearchModule {}

¿Tienes algún ejemplo de clases de doble propósito funcionando en algún otro lugar?