mat-toolbar is not a known element [Angular 18]

I know there are very similar problems related to import and modules but I could not reproduce the solutions proposed and I am stuck for a few days by now so I am humbly asking for help to be able to solve that blocking that prevent me to follow through the book "Pro Angular 16".

I am using VoidLinux with node v18.19.1, pnpm 9.6 (I did add cli: { "packageManager": "pnpm" } in angular.json), @angular/cli 18.1.2

Running pnpm ng serve -o returns the following errors that occur sequentially:

[ERROR] NG8001: 'mat-toolbar' is not a known element
[ERROR] NG8001: 'mat-icon' is not a known element
[ERROR] NG8002: Can't bind to 'matBadge' since it isn't a known property of 'mat-icon'


I did try to add schemas: [CUSTOM_ELEMENTS_SHEMAS], or schemas: [NO_ERROR_SCHEMAS], just below the decorator @NgModule({ in app.module.ts with the matching import to the first line (e.g. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; but to no avail.

Here is my app.module.ts:

// import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
MatButtonModule, MatToolbarModule, MatIconModule, MatBadgeModule,
MatTableModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatSlideToggleModule,
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }


app.component.ts:

import { Component } from '@angular/core';
import { TodoList } from "./todoList";
import { TodoItem } from "./todoItem";

@Component({
selector: 'app-root', // CSS selector that matches HTML tag to which the component will be applied
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})

export class AppComponent {
title = 'todo';
private list = new TodoList('Aurèle', [
new TodoItem("Finish the UBC website", true),
new TodoItem('Write some unit tests'),
new TodoItem('Learn Angular'),
new TodoItem('Write a word document for the jury'),
new TodoItem('Buy INCOSE book related to SysML v2', true),
]);

get username(): string {
return this.list.user;
}

get itemCount(): number {
return this.list.items.filter(item => !item.complete).length;
}
}


app.component.html:

<mat-toolbar color="primary" class="mat-elevation-z3">
<span>{{ username }}'s to do list</span>
<mat-icon matBadge="{{ itemCount }}" matBadgeColor="accent">
checklist
</mat-icon>
</mat-toolbar>


The imports are actually in the module and not in the component itself. Besides, the component is not marked as standadlone so I understand not why the properties related to Angular Material package are not found, because they do exist in node_modules/@angular/material subdirectory!

@EDIT I altered main.ts to look like this:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));

platformBrowserDynamic().bootstrapModule(AppModule)
.catch((err) => console.error(err));


Now the error reported by Angular is this:

[vite] Internal server error: NG0907: The _AppComponent component is not marked as standalone, but Angular expects to have a standalone component here. Please make sure the _AppComponent component has the `standalone: true` flag in the decorator.


But what if I add standalone: true; into app.component.ts? It is not a standalone but a module declared into app.module.ts so I understand not the situation.

As asserted in the docs' links kindly provided by Naren Murali, I will try to stick to standalone components mechanism from now on, as it is the recommanded way to go.

Continue reading...