CODEWITHSUNDEEP
angularionic-framework
Raphael Andres
Raphael Andres

Reputation: 127

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

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

enter image description here

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

Upvotes: 0

Views: 1318

Answers (2)

Raphael Andres
Raphael Andres

Reputation: 127

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

Upvotes: 0

Kinglish
Kinglish

Reputation: 23654

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

Upvotes: 1

Related Questions