角度未捕获错误:模板解析错误:不是已知元素 [英] Angular Uncaught Error: Template parse errors: is not a known element

问题描述

我正在尝试在react应用中使用babel独立版来翻译Angular TypeScript.编译确实在工作中起作用".但是，当我尝试导入一个组件并在另一个组件的模板中使用它的选择器时，会出现错误.

I am trying to use babel standalone inside a react app to transpile Angular TypeScript. The transpiling does "work" however I get an error when I try to import a component and use it's selector inside the template of another component.

这是我得到的错误:

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组件(用户代码):

SearchBar Component (user code):

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

应用程序组件(用户代码):

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

}

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

Please note, I am creating an online code editor so yes I need to use babel standalone. Here is my babel config for typescript:

(来自我的React应用)

(from my react app)

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 app):

My transpile function (simplified, also from my react app):

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

  return myCode;
}

我想念什么?

推荐答案

我首先看这段代码是，我没有遇到既是模块又是组件的类，我的感觉是它们需要两个单独的类.

My first thought looking at this code is that I have not come across a class that is both and module and a component, my feeling is that they need to be two separate 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 {}

您有在任何其他地方都可以使用的双重用途类示例吗?

Do you have any examples of dual purpose classes working anywhere else?

这篇关于角度未捕获错误:模板解析错误:不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！