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

Question

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.

Answer 1

Please alter main.ts to look like this. Main.ts is the entry point for an Angular application, so it must be bootstrapped properly by either a component or module.

You are mixing standalone and modular, you must choose between either.

Importing and using components

NgModules

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

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

Since your code is predominately about modular method, I am suggesting the above code, but it can also be implemented with standalone flow.