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”: “npm” } 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!