Ionic 4 cannot import custom component is not a know element

ion-button' is not a known element ionic 4
ion-router link is not a known element
is an angular component, then verify that it is part of this module.
ionic4 star rating' is not a known element
ion-view is not a known element
ion-title' is not a known element
angular component is not a known element
ion text is not a known element

I am new to Ionic and I want to create a custom listview with expandable items following this link : https://www.joshmorony.com/creating-an-accordion-list-in-ionic/.

The problem is that my custom component is never recognized, I have tried many things but nothing works... I am using Ionic 4 and they do not talk of component generation in their doc.

The error is :

Error: Template parse errors:
'expandable' is not a known element:
1. If 'expandable' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Here is my project folder

expandable.component.html :

<div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
    <ng-content></ng-content>
</div>

expandable.component.ts :

import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core';

@Component({
  selector: 'app-expandable',
  templateUrl: './expandable.component.html',
  styleUrls: ['./expandable.component.scss']
})
export class ExpandableComponent {

  @ViewChild('expandWrapper', {read: ElementRef}) expandWrapper;
  @Input('expanded') expanded;
  @Input('expandHeight') expandHeight;

  constructor(public renderer: Renderer) {
  }

  ngAfterViewInit(){
      this.renderer.setElementStyle(this.expandWrapper.nativeElement, 'height', this.expandHeight + 'px');   
  }

}

And here is how I am trying to use it :

<expandable [expandHeight]="itemExpandHeight" [expanded]="pet.expanded">
      Hello people
</expandable>

Finally, my app.module.ts :

@NgModule({
  declarations: [AppComponent, ExpandableComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(), 
    AppRoutingModule,
    IonicStorageModule.forRoot()
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    DatabaseService, 
    PetService,
    SQLite
  ],
  bootstrap: [AppComponent]
})

The issue with the component selector. You have defined the selector app-expandable however you are using expandable Replace the below code

<expandable [expandHeight]="itemExpandHeight" [expanded]="pet.expanded">
      Hello people
</expandable>

by

<app-expandable [expandHeight]="itemExpandHeight" [expanded]="pet.expanded">
      Hello people
</app-expandable>
OR

or you change the selector in ExpandableComponent

@Component({
  selector: 'expandable', //<-- change here
  templateUrl: './expandable.component.html',
  styleUrls: ['./expandable.component.scss']
})
export class ExpandableComponent {

}

Angular: Template parse errors selector name is not a known element, What is not part of any NgModule or the module has not been imported into your Modul? 'my-span1' is not a known element. Googling that I found this other SO question: Ionic 4 cannot import custom component is not a know element. but the accepted answer is quite poor to say the least, and when it comes down to creating a new module I enter the unknown (for me) territory.

I found the solution, you have to create a component.module.ts at the root of your component, and then add in your imports ComponentsModule

component.module

Component is not part of any NgModule or the module has not been , . If you don't, it'll try to load them when app started and throws that error. I was stuck on this for a little while as well until I realized that the problem was I did not create the Ionic Angular project properly. you have to include --type=angular

In Ionic 3 and 4, what helped me is, to remember that it's not enough to add

import { ComponentsModule } from '../../components/components.module';

...
@NgModule({
  imports: [
    ...
    ComponentsModule,
    ...
  ],

to your app.module.ts

You also need to add it to every page's module !

src/app/home/home.module.ts
src/app/about/about.module.ts
src/app/game/game.module.ts

I never liked using the CUSTOM_ELEMENTS_SCHEMA in the NgModule ...

If ' ' is an Angular component, then verify that it is part of this module, Is an angular component then verify that it is part of this module? Either I clone the original Ionic component and adjust the code to my needs or I wrap the original Ionic component with a custom element that enhances the ionic component the way I need. The first alternative will give you more flexibility as you would be able to deeply modify the code and behaviour of the component.

Ionic4 component not a known element - ionic, In short, when you wanna use a component in html, then import path points to *​module. If this custom component is a webcomponent, then add  Custom Component in Ionic 4. The component is one of the building blocks of the ionic framework. Here we will be creating our own custom component. Components are the class, with HTML template. For our custom component have a decorator that is @Component, to add metadata to a class to describe the component. Important concept:

BUG in LazyLoading, I've created a custom component using ionic g component do-toolbar; I've Error​: Template parse errors: 'do-toolbar' is not a known element What @walfridosp suggested worked for me - you import into the relevant page's  Throughout this Ionic 4 tutorial, we'll learn how to use the latest version of Ionic — Ionic 4 which is now in RC.Starting with Ionic 4, Ionic is going framework agnostic, which means you can use it with any framework or no one at all i.e with plain vanilla JavaScript and native web components (custom elements) supported by modern web browsers.

How to use Web Components in Angular, Your browser does not currently recognize any of the video formats available. It loads the polyfills dynamically, so it cannot be imported directly as a JS on the fields to tell Angular to treat the custom fields as standard text inputs. that provides more comprehensive support for binding custom elements as form inputs in  The DateTime component is used to present an interface which makes it easy for users to select dates and times. The DateTime component is similar to the native <input type="datetime-local"> element, however, Ionic’s DateTime component makes it easy to display the date and time in a preferred format, and manage the datetime values.

Comments
  • I have the exact same problem. Did you find something?
  • Please see my solved answer
  • I have already tryed but it doesn't work ... I have the same message.
  • Any other ideas please ?
  • Please create stackblitz demo for the same.
  • I cannot create custom component using stackblitz... And I use ionic 4, stackblitz is ionic 3