Ion-content is not a known element

I created a component and add the following to the my-add-component.html:

<ion-content></ion-content>

Everything is fine so far.

Now I add a route in app-routing-module.ts:

import { MyAddComponent } from './my-add/my-add.component';

const routes: Routes = [
  {

    path: 'tabs/tab2/myadd',

    component: MyAddComponent

As soon as I do this, I receive the error in my-add-component.html:

ion-content is not a known element

Does anyone know what is happening? Thank you.

1 Like

I wish whoever decided to (a) pimp the page generators that (b) default to creating modules for every page would spend a few hours every day reading support forum threads.

Does MyAddComponent have a dedicated module for it? If so, does said module import IonicModule?

1 Like

Thank you for your time repropos. I thought it would be enough with this in app.module.ts:

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

imports: [BrowserModule,

            IonicModule.forRoot(),

            ReactiveFormsModule,

            AppRoutingModule],

I am getting closer to the problem. When I created the component, I used this command:

ionic generate component MyAdd --spec=false

I noticed if I leave out the --spec=false, then everything works.

I am guessing as you mentioned, there is something wrong with the command. But is there an easier (global) way I dont have to import IonicModule into every component I create? Thank you.

That’s a great question, and the best answer I have to it at the moment is “totally ignore all the lazy-loading stuff and put everything in a single AppModule”.

Thank you. I thought that not using --spec=false was solving the problem but its not. It’s that I had commented out the component in the routing section. So basically the error continues: “ion-content is not a known element”.

For future visitors, this answer on an Ionic 5 reported bug helped me:

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 :slight_smile:

parent.module.ts →
…
[
CommonModule,
FormsModule,
IonicModule,
YourCustomComponentModule
]
…

Cheers!

source

1 Like