Ionic 5 Custom Angular Components not showing

I can’t seem to get custom Angular components to display in Ionic 5.

Steps to reproduce:

  • Generate a blank Ionic app
  • Generate a component with ionic generate component components/dougi
  • Import Component reference into app.module.ts
  • Add class reference to declarations, entryComponents, exports etc (none seem to make any difference)
  • Add to the home.page.html file

/components/dougi/dougi.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dougi',
  templateUrl: './dougi.component.html',
  styleUrls: ['./dougi.component.scss'],
})
export class DougiComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <app-dougi></app-dougi>
  </div>
</ion-content>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { DougiComponent } from './components/dougi/dougi.component';

@NgModule({
  declarations: [
    AppComponent, 
    DougiComponent
  ],
  entryComponents: [
    DougiComponent
  ],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
  exports: [
    DougiComponent
  ]
})
export class AppModule {}

Browser console output:

'app-dougi' is not a known element:
1. If 'app-dougi' is an Angular component, then verify that it is part of this module.
2. If 'app-dougi' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

What am I doing wrong please?

If you are lazy loading, then it must be the home page module that is missing a reference to the custom component. Try importing it there as well and see if this is resolved

Thanks. I assume you mean like this?

import { Component } from '@angular/core';
import { DougiComponent } from '../components/dougi/dougi.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  entryComponents: [DougiComponent]
})
export class HomePage {

  constructor() {}

}

Unfortunately, that doesn’t work. Same error :frowning:

Maybe try a components module that controls the custom components, and import that to your app.module and any page modules that use it

Thank you. That worked. For those wanting specific instructions on this there is a good overview here.