ion-header' is not a known element ionic 5

Question

Following are the steps i have taken

1. I created a new project of ionic 5 using ionic start template blank
2. updated angular to angular 9
3. created a new page module using ng g page main
4. listed in AppRoutingModule using lazyloading.

I am getting following error

ERROR in src/app/pages/main/main.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 <ion-header>
  ~~~~~~~~~~~~

  src/app/pages/main/main.page.ts:5:16
    5   templateUrl: './main.page.html',
                     ~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MainPage.
src/app/pages/main/main.page.html:2:3 - error NG8001: 'ion-toolbar' is not a known element:
1. If 'ion-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'ion-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress
this message.

2   <ion-toolbar>
    ~~~~~~~~~~~~~

  src/app/pages/main/main.page.ts:5:16
    5   templateUrl: './main.page.html',
                     ~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MainPage.
src/app/pages/main/main.page.html:3:5 - error NG8001: 'ion-title' is not a known element:
1. If 'ion-title' is an Angular component, then verify that it is part of this module.
2. If 'ion-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3     <ion-title>main</ion-title>
      ~~~~~~~~~~~

  src/app/pages/main/main.page.ts:5:16
    5   templateUrl: './main.page.html',
                     ~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MainPage.
src/app/pages/main/main.page.html:7:1 - error NG8001: 'ion-content' is not a known element:
1. If 'ion-content' is an Angular component, then verify that it is part of this module.
2. If 'ion-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress
this message.

7 <ion-content>
  ~~~~~~~~~~~~~

I am missing something very obvious.

Following is the code

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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/main/main-routing.module').then(m => m.MainPageRoutingModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

main.module.ts

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

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

import { MainPageRoutingModule } from './main-routing.module';

import { MainPage } from './main.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    MainPageRoutingModule
  ],
  declarations: [MainPage]
})
export class MainPageModule {}

main.page.ts

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

@Component({
  selector: 'sxm-main',
  templateUrl: './main.page.html',
  styleUrls: ['./main.page.scss'],
})
export class MainPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

main.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>main</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

Answer 1

In my case I was getting weird html template errors including the one OP describes because I created new component and forgot to add it to the module declarations

app.module.ts

@NgModule({
...
declarations: [MyComponent]
}

Answer 2

I had the same issue and I simply forgot to add the IonicModule to the new module I created that contained the components throwing the exceptions.

Check to see if all your modules import IonicModule

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

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

import { ExamplePage } from './contactus.page';

@NgModule({
  imports: [
    CommonModule,
    IonicModule
  ],
  declarations: [ExamplePage]
})
export class ExampleModule {}

Answer 3

Add the name of the component to the declaration part of the nearest .module.ts file.

@NgModule({
  imports: [your-other-modules],
  declarations: [your-component-name-here]
})

Answer 4

You just need need to include IonicModule in the imports array of your components.module.ts

  imports: [
    CommonModule, IonicModule
  ],

Answer 5

In your app-routing.module.ts instead of main-routing.module you should import main-page-module.

Instead of this:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/yourpage/yourpage-routing.module').then(m => m.YourPageRoutingModule)
  },
];

Try this:

const routes: Routes = [
      {
        path: '',
        loadChildren: () => import('./pages/yourpage/yourpage.module').then(m => m.YourPageModule)
      },
    ];

Answer 6

Posting this in case anyone else has this issue, or in case I have the same issue 6 months from now and can't remember how I fixed it.

I had this error in FoobarComponent. It is part of a library that I was building for reuse in other projects.

Normally when I see an error like this, I check to make sure that FoobarComponent is declared in a module and that the same module imports IonicModule. Either one of those would cause the compiler (and usually VS Code) to complain.

1. FoobarComponent was declared in and exported from FoobarModule
2. FoobarModule imported IonicModule
3. VS Code wasn't complaining, only the compiler.
4. Other components in the same library were working fine - it was just FoobarComponent that had a problem.

I discovered the issue in foobar/index.ts, where I export all of the Foobar related classes in one place. It looked like this:

export * from './foobar.component';
export * from './foobar.service';
export * from './foobar.models';

Notice anything missing?

It turns out that I was not exporting FoobarModule at all. As a result, when Ivy was doing its tree-shaking step, I guess it was determining that the module was not needed and pruning it. This explains why VS Code didn't have a problem, since it doesn't tree-shake.

Adding the export to foobar/index.ts fixed the problem:

export * from './foobar.component';
export * from './foobar.service';
export * from './foobar.models';
export * from './foobar.module'; // This is the line that was missing

Answer 7

For me the problem was not having a route in the Routes object in

app-routing.module.ts

for one of my pages (some unused map page)

adding:

{
    path: 'map',
    loadChildren: () => import('./pages/map/map.module').then( m => m.MapPageModule)
},

made

npm run build

succeed.

hope this helps someone (upgrading from ionic 5 to 6 and angular 11 to 12).

Answer 8

1-) Remove node_modules folder and remove the package-lock.json file,

2-) Update global angular-cli to latest version,

3-) Validate that TypeScript version doesn't exceed the version supported by Angular (less than 3.8.0),

4-) Run npm install on the project and test again!

Answer 9

In my case, I made a silly mistake.

Importing a Component file despite the need to import a Module into the Router Module caused an error.

Answer 10

I had the same issue, I ran npm install from the terminal. This fixed the issue, the ionic elements are now recognized.

Answer 11

Worth nothing when struggling with this is to make sure you rebuild your app again from time to time after you do changes. For me, answer https://stackoverflow.com/a/66730027/3280710 was correct but I had to rebuild my app in order for the errors to resolve.

ctrl + c
Terminate batch job (Y/N)? Y

ng serve

Answer 12

I am copy pasting here from a bug report in Ionic 5 that helped me solve my issue:

I encountered this problem several times - randomly - usually after generating a new component, however the previous -prod builds were successful. Probably it is a build-bug since it happens once in a while wink

You probably are trying to open your component/page in a modal window.

If yes: Add YourCustomComponentModule to the imports list of the ParentModule and your problem will disappear

parent.module.ts ?

…

[ CommonModule, FormsModule, IonicModule, YourCustomComponentModule ] …

source

Answer 13

I fixed This issue after many days::

This issue back to Angular Language Service vs code extension.

1- Update vscode to latest version 2- remove and reinstall Angular Language Service

3- Download the .vsix file for the release that you want to install from the releases tab.

Do not open the .vsix file directly . Instead, in Visual Studio code, go to the extensions tab. Click on the "..." menu in the upper right corner of the extensions tab, select "Install from vsix..." and then select the .vsix file for the release you just downloaded.

restart vscode will fix your issue as mine

For more information you can check ionic froum Topic