Angular + Ionic - Using ionic components returns 'not a known element'

Question

I just created an app using Ionic and Angular, but I always get the following error, it doesn't matter if I put the html into the ionic generated "pages" folder or in my newly made page.

Ionic version 5.4.16 Angular version 11.2.13

This is my LoginPage html

<ion-header>
  <ion-toolbar>
    <ion-title>OSCheckin</ion-title>
  </ion-toolbar>
</ion-header>
<div>
  <div class="d-flex h-100">
    <div class="m-auto w-75">
      <IonItem>
          <IonLabel>Email</IonLabel>
          <IonInput value="" placeholder="Ex.: [email protected]" type="email"></IonInput>
      </IonItem>
      <IonItem>
          <IonLabel>Senha</IonLabel>
          <IonInput value="" placeholder="*********"></IonInput>
      </IonItem>
      <IonButton onClick="" expand="block">Entrar</IonButton>
    </div>
  </div>
</div>

this is my login module:

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

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

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

And this is my AppModule:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Thanks in advance :)

Kinglish · Accepted Answer · 2021-05-12 22:36:19Z

1

I believe you'll fix it by adding the angular common module with your ionic module

ie: AppModule.ts

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

@NgModule({
  ...
  imports: [
    CommonModule

answered May 12, 2021 at 22:36

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Raphael Andres Over a year ago

Really hoped that this was the answer but it didn't make a diference :(

Kinglish Over a year ago

Just to make sure, you're adding CommonMOdule to each module.ts file (that also uses IonicMOdule)?

Raphael Andres Over a year ago

Yeah, I included it in every module.ts files that I could after you've suggested it, even the routing ones, but it didn't work, tried one by one btw. I'll try creating another project with an older Angular version to check if I can make it work

Raphael Andres Over a year ago

Hey, it worked on Angular 9. I'll "report" this on the official forum. Thx anyway mate ;)

Raphael Andres Over a year ago

You wont believe it........ I'm so mad with myself rn, the issue was that I was trying to use IonButton, IonItem, etc, the correct was ion-button, ion-item, etc

Raphael Andres · Accepted Answer · 2021-05-12 23:25:14Z

0

Ok, so this was pretty basic, my mistake was that I was trying to use the components like the following:

<IonButton></IonButton>
<IonItem></IonItem>
etc

the correct was

<ion-button></ion-button>
<ion-item></ion-item>
etc

really can't believe I lost 2 hours on this

answered May 12, 2021 at 23:25

Raphael Andres

1273 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular + Ionic - Using ionic components returns 'not a known element'

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related