How to create a global component on ionic.io with angular 11?

Ionic Framework
1

Hello I am trying to create a global component on Ionic.io v6.13.1 with Angular 11

I made a basic app and generated a component naming header
In header component I changed the selector to

Now when I am trying to call the component in any of the modules it throws an error

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

on the console
here is the header.component.ts

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

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

  constructor() { }

  ngOnInit() {}

}

Here is the app.module.ts

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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

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

I also tried importing the Schema but didn’t work
Here is the other module contact.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { ContactPageRoutingModule } from './contact-routing.module';

import { ContactPage } from './contact.page';
import { HeaderComponent } from '../header/header.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HeaderComponent,
    ContactPageRoutingModule
  ],
  declarations: [ContactPage]
})
export class ContactPageModule {}

And this is the html code

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>
<dynamic-header></dynamic-header>
<ion-content>
  <ion-grid class="ion-padding">
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle class="ion-padding">Feel free to write to us</ion-card-subtitle>
      <ion-card-title class="ion-padding">Contact Us</ion-card-title>
    </ion-card-header>
    <ion-card-content> 
      echo background using --background
    </ion-card-content>
  </ion-card>
  <ion-row>
  <ion-col class="ion-align-self-center">
    <h3 class="ion-padding">Meet us at our Location</h3>
    <ul>
      <li><strong>Address:</strong> Jalpaiguri, West Bengal</li>
      <li><strong >Email:</strong><ion-button class="mail" href="mailto:khabarjalpaiguri@gmail.com" size="small" slot="end" color="light" fill="trasparent">khabarjalpaiguri@gmail.com</ion-button></li>
    </ul>
    </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
    <ion-item>
      <ion-label position="floating"> Your Name</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Your Email</ion-label>
      <ion-input type="mail"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Subject</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Your Message</ion-label>
      <ion-textarea></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-button type="submit" color="primary" class="ion-text-center" >Submit Query</ion-button>
    </ion-item>
    </ion-col>
  </ion-row>
  </ion-grid>
</ion-content>
2

I think, but I could be wrong:

You need to remove the schema stuff, because the error normally relates to an incorrect way of declaring and importing a component in a module.

And maybe, by adding the component to entryComponents - in app.module.ts, it may work?

This is angular idiom. Not Ionic. Check angular.io and its tutorial Tour of Heroes on component creation etc.

3

I agree with @Tommertom about CUSTOM_ELEMENTS_SCHEMA: unless you can explain with perfect certainty why it’s the best option, it isn’t.

I do not agree with @Tommertom about entryComponents. Assuming you’re using Ivy (and you should be), the concept is obsolete.

Your fundamental problem is that Angular lazy loading is an all-or-nothing proposition. Personally, I find the tedium and extra pitfalls that come with it much more onerous than any benefit it provides, so I pretend it doesn’t exist and throw everything in the AppModule. That’s one option.

The other is to fully embrace it, which means that HeaderComponent needs its own module that is then imported by every other $**!@#!# module that incorporates a HeaderComponent. You need to make HeaderComponentModule that is shaped like your existing ContactPageRoutingModule.

2 Likes