I’m currently working on an Angular project which was created via the Angular CLI. Additionally I wanted to use the Angular Material Framework. At first there were no issues with using the provided components. Unfortunately at some point my template suddenly does’nt know the Angular Material components anymore. Here are some of the errors I get:

mat-grid-list' is not a known element:
1. If 'mat-grid-list' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'mat-grid-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.ngtsc(-998001)
app.component.ts(18, 2): Error occurs in the template of component AppComponent.

Can't bind to 'dataSource' since it isn't a known property of 'table'.ngtsc(-998002)
app.component.ts(18, 2): Error occurs in the template of component AppComponent.

Now you probably think that the project would crash if you try to build it. But strangely it builds without any problems and even display the components correctly.

Unluckily the attributes and functions of the Angular Material components like the [dataSource] attribute from the mat-table do not work because of that.

As you can see I imported all necessary modules and components in my component decorator:

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { RouterModule } from '@angular/router';
import { MatTableModule } from '@angular/material/table';
import { MatCardModule } from '@angular/material/card';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterModule,
    RouterOutlet,
    CommonModule,
    MatButtonModule,
    MatGridListModule,
    MatCardModule,
    MatTableModule,
  ],
  providers: [
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent{
  title = 'Title';
  // More properties here...

Normally with that I should be able to use the imported components like the mat-table or mat-card.

<mat-card> 
    <mat-card-content>

        // Content here...

    </mat-card-content>  
</mat-card>

But when trying to use them, I get the already provided errors and can’t use the attributes of the components.

To fix the problem I tried to update and reinstall Angular Material. Additionally I tried to delete my cache and recreate the files. This sadly didn’t work for me.