Ionic 4 cannot import custom component is not a know 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]
})

回答1:

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>

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

}

回答2:

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

回答3:

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 ...

来源：https://stackoverflow.com/questions/53253503/ionic-4-cannot-import-custom-component-is-not-a-know-element

标签

angular

typescript

ionic-framework

ionic4