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

I followed the official Ionic guide to create my first app, and it installed Ionic version 5.4.16 Angular version 11.2.13.
The issue is that anytime that I try to use a Ionic component (ie. ion-button, ion-label, etc), I get this message

image762×369 24.6 KB

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.: joao.silva@prefeitura.org.br" 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 {}

btw, if I install Angular 9, it works perfectly.

2 posts - 2 participants

Read full topic