Angular 18中mat-toolbar等元素识别失败及组件引导问题求助

环境配置：

• 系统：VoidLinux
• Node.js：v18.19.1
• pnpm：9.6（已在angular.json配置为包管理器）
• Angular CLI：18.1.2
• 学习资料：《Pro Angular 16》

运行pnpm ng serve -o时出现的错误：

1. 'mat-toolbar' is not a known element
2. 'mat-icon' is not a known element
3. Can't bind to 'matBadge' since it isn't a known property of 'mat-icon'

尝试过的操作及后续问题：

• 在app.module.ts的@NgModule中添加schemas: [CUSTOM_ELEMENTS_SHEMAS]或schemas: [NO_ERRORS_SCHEMAS]，无效
• 已在app.module.ts中导入MatToolbarModule、MatIconModule等Material模块
• 修改main.ts同时调用bootstrapApplication和bootstrapModule后，出现NG0907: The _AppComponent component is not marked as standalone错误

核心原因：Angular 18默认采用独立组件模式，而《Pro Angular 16》基于传统NgModule模式，版本不匹配导致冲突。以下两种方案二选一：

方案1：切换回NgModule模式（匹配教程） #

1. 修正main.ts，仅保留bootstrapModule调用：

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

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

2. 确保AppComponent没有standalone: true装饰器：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  // 移除standalone: true（如果存在）
})
export class AppComponent { /* ... */ }

3. 完善app.module.ts配置：
   • 必须导入BrowserAnimationsModule（Material组件依赖动画）
   • 补充MatBadgeModule（matBadge属于该模块，容易遗漏）
   • 移除schemas配置（会掩盖真实模块缺失问题）

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Material模块导入
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatBadgeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 清理缓存重启项目：

pnpm cache clean --force
pnpm install
pnpm ng serve -o

方案2：改用独立组件模式（适配Angular 18） #

1. 将AppComponent改为独立组件，直接导入所需模块：

import { Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatBadgeModule
  ]
})
export class AppComponent { /* ... */ }

2. 修正main.ts，仅使用bootstrapApplication并提供动画支持：

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

bootstrapApplication(AppComponent, {
  providers: [provideAnimations()]
})
.catch(err => console.error(err));

3. 可直接删除app.module.ts（独立组件无需NgModule）
4. 清理缓存重启项目：

pnpm cache clean --force
pnpm install
pnpm ng serve -o

内容的提问来源于stack exchange，提问作者Aurélien Plazzotta