Angular Uncaught Error: Template parse errors: is not a known element

Question

我正在尝试在 React 应用程序中使用独立的 babel 来转译 Angular TypeScript。转译确实“有效”，但是当我尝试导入组件并在另一个组件的模板中使用它的选择器时出现错误。

这是我得到的错误：

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.

SearchBar 组件（用户代码）：

// 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;

应用程序组件（用户代码）：

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 {

}

请注意，我正在创建一个在线代码编辑器，所以是的，我需要独立使用 babel。这是我的打字稿 babel 配置：

（来自我的 React 应用）

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

Babel 版本：

https://unpkg.com/@babel/standalone@7.12.9/babel.min.js

我的转译函数（经过简化，也来自我的 React 应用程序）：

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

  return myCode;
}

我错过了什么？

Answer 1

我看这段代码的第一个想法是，我还没有遇到既是模块又是组件的 class，我的感觉是它们需要是两个独立的 classes .

// 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 {}

你有任何双重目的的例子吗class在其他地方工作？

Answer 2

一路走来我把事情弄得一团糟，CodeMonkey 正确地指出我的组件中不应该有 NgModule。我会把答案归功于他，但只是为了完整起见，以防万一有人想看一个有效的例子。请注意，有一些特定于我的在线代码编辑器的语法（例如导入组件时不需要文件路径）。

带模块的主要组件：

// 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));

应用组件：

// 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!";
  }
}

SearchBar 组件：

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

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

Angular Uncaught Error: Template parse errors: is not a known element

Angular Uncaught Error: Template parse errors: is not a known element

typescript

babeljs

angular