'ion-toast' is not a known element

Ionic Framework
1

Hello,

using the ion-toast docs i am trying to implement a simple toast in the app component, but i can’t compile the app because of the error

'ion-toast' is not a known element:

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

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

app.comp…html

<ion-app>
  <ion-menu contentId="menuContent">
    <ion-header>
      <ion-toolbar>
        <ion-title> Money </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-menu-toggle>
        <ion-list>
               ...
        </ion-list>
      </ion-menu-toggle>

      <ion-toast [isOpen]="isToastOpen" message="No Internet Connection" [duration]="5000"
        (didDismiss)="setOpen(false)"></ion-toast>
    </ion-content>
  </ion-menu>

  <ion-router-outlet id="menuContent"></ion-router-outlet>
</ion-app>

ionic -v ==> 7.1.1

Any idea what’s wrong here? i don’t want to use CUSTOM_ELEMENTS_SCHEMA
everything else is working btw, the error only happens when i add ion-toast which is weird.

Thanks in advance guys