'ion-icon' is not a known element

Ionic Framework ionic-v3
6

Yeah it seems that in order to use the ionic specific elements, you need to include IonicModule.forRoot(componentThatUsesIonicElements) in the input array of the NgModule that declares that component.

Example:
Say we have a home page component that has some ionic elements (ion-item etc).

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

@Component({
  templateUrl: 'home.html',
})

export class HomePage {
  constructor() {
    console.log('Home Constructor');
  }

}

Now, say we’re importing that into a module. In this case, we’ll call it HomeModule. It looks like this:

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';

import { HomePage } from './home';

@NgModule({
    imports: [
        IonicModule.forRoot(HomePage)
    ],
    declarations: [
        HomePage
    ],
    exports: [
        HomePage
    ]
})
export class HomeModule { }

Note that the example should probably contain CommonModule so you can use ngIf and ngFor and all that good stuff. I just don’t have it there to keep it simple.

So now we need to include that in our AppModule so we can get to the home page:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomeModule } from '../pages/home/home.module';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    HomeModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: []
})
export class AppModule { }

This example shows how to include a feature module in your app module and also shows what you need to do in feature modules so that ionic specific elements are recognized.

Hope that makes more sense,
Dharsan

4 Likes