Angular 15懒加载绑定与Angular Material报错解决咨询

问题根源 #

你当前使用loadComponent直接懒加载组件，但这些组件属于各自的特性模块（比如DecksModule），这种加载方式会绕过特性模块的配置，导致组件无法访问模块中导入的CommonModule（提供ngClass等指令）和Angular Material模块（提供mat-divider等组件）。

方案一：改用懒加载特性模块（推荐） #

将路由配置从loadComponent改为loadChildren，让Angular加载完整的特性模块，模块内的导入配置会自动生效：

修改app-routing.module.ts的路由配置：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./home-page/home-page.module').then(m => m.HomePageModule)
  },
  {
    path: 'cardpool',
    loadChildren: () => import('./cardpool/cardpool.module').then(m => m.CardpoolModule)
  },
  {
    path: 'decks',
    loadChildren: () => import('./decks/decks.module').then(m => m.DecksModule)
  },
  {
    path: 'banlist',
    loadChildren: () => import('./banlist/banlist.module').then(m => m.BanlistModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
  }
];

然后为每个特性模块配置子路由，以DecksModule为例：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DecksComponent } from "./decks.component";
import { MatDividerModule } from '@angular/material/divider';
import { RouterModule, Routes } from '@angular/router';

// 配置当前模块的子路由
const routes: Routes = [
  { path: '', component: DecksComponent }
];

@NgModule({
    declarations: [DecksComponent],
    imports: [
        CommonModule,
        MatDividerModule,
        RouterModule.forChild(routes) // 注册子路由
    ],
    exports: [DecksComponent]
})
export class DecksModule {}

方案二：将组件改为独立组件（Angular 14+支持） #

如果不想使用特性模块，可以将组件标记为独立组件，直接在组件元数据中导入所需模块：

修改decks.component.ts：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDividerModule } from '@angular/material/divider';

@Component({
  selector: 'app-decks',
  templateUrl: './decks.component.html',
  styleUrls: ['./decks.component.scss'],
  standalone: true, // 标记为独立组件
  imports: [CommonModule, MatDividerModule] // 导入依赖模块
})
export class DecksComponent {
  constructor() {}

  async ngOnInit() {}
}

完成后可以删除对应的decks.module.ts，独立组件无需模块包裹。

额外检查 #

• 确保所有使用Angular Material组件的地方，对应的模块都已在特性模块（方案一）或独立组件（方案二）中导入
• 修正HTML模板语法错误：你提供的decks.component.html里有错误标签<span>Span 3<<\/span>，应改为<span>Span 3</span>，避免额外编译报错

内容的提问来源于stack exchange，提问作者Blake