>source

나는 Angular TypeScript를 트랜스 파일하기 위해 반응 앱 내에서 babel 독립형을 사용하려고합니다. 트랜스 파일은 "작동"하지만 구성 요소를 가져 와서 다른 구성 요소의 템플릿 내에서 선택기를 사용하려고하면 오류가 발생합니다.

이것은 내가 얻는 오류입니다.

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을 사용해야합니다. 다음은 typescript에 대한 내 바벨 구성입니다.

(내 반응 앱에서)

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/[email protected]/babel.min.js

내 트랜스 파일 기능 (간체, 내 반응 앱에서도) :

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

내가 무엇을 놓치고 있습니까?

  • 답변 # 1

    이 코드를 보는 첫 번째 생각은 모듈이자 구성 요소 인 클래스를 발견하지 못했다는 것입니다. 내 느낌은 두 개의 개별 클래스가 필요하다는 것입니다.

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

    다른 곳에서 일하는 이중 목적 수업의 예가 있습니까?

  • 답변 # 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 {}
    
    
    

관련 자료

  • 이전 python - 유형 변수가 <NA인지 확인하는 방법? 아니면 판다 데이터 프레임에서? npnan ()이 작동하지 않습니다
  • 다음 c++ - 이 상황에서 스트림 삽입 연산자를 재정의 할 때 "연산자를 찾을 수 없음"오류가 발생하는 이유는 무엇입니까?