Error NG8001: 'ion-header' is not a known element: 1. If 'ion-header' is an Angular component, then verify that it is part of this module. 2. If 'ion-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHE

Ionic Framework
1

After a long-due overhaul of version updates (always painful), I am left with the following errors:

Error: src/app/pages/home/home.page.html:1:1 - error NG8001: ‘ion-header’ is not a known element:

  1. If ‘ion-header’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-header’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

1

Here is my module:

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { IonicModule } from ‘@ionic/angular’;
import { FormsModule } from ‘@angular/forms’;
import { RouterModule } from ‘@angular/router’;
import { HomePage } from ‘./home.page’;
import { BreadcrumbModule } from “xng-breadcrumb”;
import { HomePageRoutingModule } from ‘./home.page.routing.module’;

@NgModule({
imports: [
CommonModule,
FormsModule,
BreadcrumbModule,
IonicModule,
RouterModule,
HomePageRoutingModule
],
declarations: [ HomePage ]
})
export class HomePageModule {}

ionic info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\knetherland\AppData\Local\pnpm\global\5.pnpm@ionic+cli@7.2.0\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.7.0
@angular-devkit/build-angular : 16.2.12
@angular-devkit/schematics : 16.2.12
@angular/cli : 16.2.12
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.3
@capacitor/android : 4.6.3
@capacitor/core : 4.6.3
@capacitor/ios : 4.6.3

Utility:

cordova-res : 0.15.4
native-run : 1.7.4

System:

NodeJS : v20.11.0 (C:\Program Files\nodejs\node.exe)
npm : 10.2.4
OS : Windows 10

2

Can someone please respond?

3

Since I couldn’t get a response from Ionic, I figured I would share my journey in upgrading old Ionic Angular apps to the new Ivy compiler (what a mental roller coaster). May write an article later so this will be brief, a list of steps:

  1. Read the following articles: Angular, Angular Update Guide
  2. Start with 3rd party npm packages if necessary. Look at the Angular versions in the package.jsons. For instance: @cloudideaas/ngx-breadcrumb - npm
  3. Determine if you need to privatize those packages by forking the repo and following the Angular Update Guide above.
  4. Ivy components are a special case and do not build to the dist folder correctly unless you follow the recommendations here: Simple Guide to Publishing Angular Libraries | by Paul Harwood | Runic Software | Medium
  5. I followed this guide too: https://www.youtube.com/watch?v=x5PZwb4XurU
  6. Deploy to npm if you like (optional): How to Build and Publish Angular Library | by jinal shah | Medium.

You can reference these privately if you prefer:

image
image1036×114 73.8 KB

  1. Reinstall from your npm repos and refactor your npm imports. i.e.
    import { BreadcrumbService } from “ngx-breadcrumb” to import { BreadcrumbService } from “@cloudideaas/ngx-breadcrumb”
  2. Continue following the Angular Update Guide until you get to your desired Ivy version.

These steps saved me from the mental institution. :slight_smile:

4

Item 5 should be this link: