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

Error Alert: missing property data in angular 5 type

Elements constrained by themselves in a rest parameter with generic types

Creating dynamic components in Angular 2 and adding them to the view container of the body

Looking for a solution to the error message: "X is not able to be assigned to the type 'IntrinsicAttributes & Props'"

Error: export keyword used incorrectly

Experiencing difficulties with a click event function for displaying or hiding content

How can I detect when the Redux state object in my Angular (v5) application changes?

Dealing with nullable properties in Typescript

Updating the date format of [(ngModel)] with the ngx-datepicker library

Encountering an issue on Safari: WeakMap variable not found in .NET Core 1.1.0 and Angular 2 application

Guide on integrating a newly bought template into an Angular 6 and Bootstrap 4 application

Tips on creating a hierarchical ul list from a one-dimensional array of objects

Secure method of utilizing key remapped combined type of functions

Tips for sending a parameter to an onClick handler function in a component generated using array.map()

Jest Test - Uncaught TypeError: Unable to create range using document.createRange

Issue with Type-Error when accessing theme using StyledComponents and TypeScript in Material-UI(React)

The TypeScript inference feature is not functioning correctly

Obtain JSON information in a structured model layout using Angular 4

The error message "Module 'electron' not found" is commonly encountered when working with Electron and TypeScript

Tips for creating a table in Angular 2