mat-toolbar 不是已知元素 [Angular 18]

Question

我知道存在与导入和模块相关的非常相似的问题，但我无法重现所提出的解决方案，而且我已经被困了几天了，所以我谦虚地寻求帮助，以便能够解决阻止我遵循的障碍通过《Pro Angular 16》这本书。

我正在使用带有节点 v18.19.1、pnpm 9.6 的 VoidLinux（我在 angular.json 中添加了 `cli: { "packageManager": "npm" }）、@angular/cli 18.1.2

运行

pnpm ng serve -o

返回以下顺序发生的错误：

[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'

我确实尝试在

schemas: [CUSTOM_ELEMENTS_SHEMAS],

中的装饰器

schemas: [NO_ERROR_SCHEMAS],

下方添加

@NgModule({

或

app.module.ts

并将匹配的导入添加到第一行（例如

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

但无济于事。

这是我的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>

导入实际上在模块中，而不是在组件本身中。此外，该组件没有标记为独立组件，所以我不明白为什么找不到与 Angular Material 包相关的属性，因为它们确实存在于

node_modules/@angular/material

子目录中！

@编辑 我将 main.ts 更改为如下所示：

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));

现在Angular报的错误是这样的：

[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.

但是如果我将

standalone: true;

添加到

app.component.ts

中呢？它不是一个独立的，而是一个声明为

app.module.ts

的模块，所以我不明白这种情况。

Answer 1

请将

main.ts

更改为如下所示。

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

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