NG8001: 'mat-nav-list' is not a known element Error

I am getting the following error on most of my mat elements. I have also imported them and made sure my app componet is not a standalone component. I have also verified that Angular 19 version is compatible with Angular Material 19.2

This is my app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule, MatSidenavContainer } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { RouterOutlet } from '@angular/router';
import { CarouselModule } from 'ngx-bootstrap/carousel';

import { AppComponent } from './app.component';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatSidenavModule,
MatListModule,
MatSidenavContainer,
RouterOutlet,
CarouselModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}


Here is my app.html file

<mat-toolbar color="primary">
<mat-icon>home</mat-icon>
<span>Balloon Website</span>
</mat-toolbar>

<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
<a mat-list-item href="#">Gallery</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div class="content">
<h1>Welcome to the Balloon Website</h1>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

<div *ngFor="let balloon of [1, 2, 3, 4, 5]" [@balloonAnimation]>
<img src="assets/balloon.png" class="balloon" alt="Balloon">
</div>

<div class="carousel-container">
<carousel>
<div *ngFor="let image of imageList">
<img [src]="image" alt="Carousel image" class="carousel-image" />
</div>
</carousel>
</div>


app.component.ts file:

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
selector: 'app-root',
standalone: false,
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [
trigger('balloonAnimation', [
transition(':enter', [
style({
transform: 'translateY(100%)',
opacity: 0,
}),
animate('5s ease-in-out', style({
transform: 'translateY(-100%)',
opacity: 1,
})),
]),
]),
],
})
export class AppComponent {
title = 'balloon-website';

imageList = [
'assets/image1.png',
'assets/image2.png',
'assets/image3.png',
];
}


Does anyone see what I am doing wrong?

Continue reading...