Angular threw an error saying: "Template parse errors: is not a recognized element"

Question

Angular threw an error saying: "Template parse errors: is not a recognized element"

I am attempting to utilize babel standalone within a react application to transpile Angular TypeScript. The transpiling process seems to be successful, however, I encounter an error when trying to import a component and use its selector within the template of another component.

The error message that is displayed:

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 Component (user code):

// ng is located 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 require 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 {

}

It is essential to mention that I am developing an online code editor which necessitates the usage of babel standalone. Below is my babel configuration for typescript:

(extracted 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 version being utilized:

https://unpkg.com/@babel/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="added9ccc3c9ccc1c2c3c8ed9a839c9f8394">[email protected]</a>/babel.min.js

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

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

  return myCode;
}

What could I possibly be overlooking?

angular typescript babeljs

Answer 1

Answer №1

At some point, I ended up making a mistake and CodeMonkey was quick to point out that I should not have NgModule in my components. I will give credit to him for the solution, but just to provide a complete example in case someone needs it. It's worth noting that there are some syntax rules specific to my online code editor (such as not needing a file path when importing components).

Main Component with Module:

// 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 Component:

// 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 Component:

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

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

Answer 2

At some point, I ended up making a mistake and CodeMonkey was quick to point out that I should not have NgModule in my components. I will give credit to him for the solution, but just to provide a complete example in case someone needs it. It's worth noting that there are some syntax rules specific to my online code editor (such as not needing a file path when importing components).

Main Component with Module:

// 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 Component:

// 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 Component:

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

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

Answer 3

Answer №2

Upon reviewing this code snippet, I couldn't help but notice the combination of a class serving as both a module and a component. In my experience, it's more common to have separate classes for these two functionalities.

// The 'ng' object is accessible from the window
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 {}

I'm curious if you've encountered any instances of dual purpose classes being used effectively elsewhere?

Answer 4

Upon reviewing this code snippet, I couldn't help but notice the combination of a class serving as both a module and a component. In my experience, it's more common to have separate classes for these two functionalities.

// The 'ng' object is accessible from the window
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 {}

I'm curious if you've encountered any instances of dual purpose classes being used effectively elsewhere?

Angular threw an error saying: "Template parse errors: is not a recognized element"

Answer №1

Answer №2

Similar questions

Utilizing the ternary operator in Angular HTML templates

Dynamically adjust the label position based on the button position

What is the proper way to import and define typings for node libraries in TypeScript?

When the observable is subscribed to, the data is not immediately available

Sending information from one Angular 2 component to another

What is the best way to only buffer specific items from an observable source and emit the rest immediately?

Updating Key-Value pairs in an ArrayList using Angular 4

Tips for positioning your side navigation menu parallel to the page edge

Encountering a 403 error upon refreshing the page of my Angular 6 project

Steer clear of using the non-null assertion operator while assigning object members

Dealing with nullable properties in Typescript

Is there a method to prevent explicitly passing the context of "this"?

Mastering the TestBed in Angular for precise implementation

Having trouble with browser freezing when using array push in Angular 4? Looking for a solution to fix this issue?

Troubleshooting: Angular input binding issue with updating

Employing a provider within a different provider and reciprocally intertwining their functions

The object literal's property 'children' is assumed to have a type of 'any[]' by default

Troubleshooting a problem with Angular2 involving the This.http.get function

Angular mobile navbar experiencing collapse issue

The mat-table fails to populate with data retrieved from the rest service