You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

已导入Angular Material组件,模板无法识别但构建正常

Angular Material组件识别异常问题

错误现象

项目构建正常、组件可正常显示,但模板中Angular Material组件及属性出现编译错误:

'mat-grid-list' is not a known element:
1. If 'mat-grid-list' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'mat-grid-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.ngtsc(-998001)
app.component.ts(18, 2): Error occurs in the template of component AppComponent.
Can't bind to 'dataSource' since it isn't a known property of 'table'.ngtsc(-998002)
app.component.ts(18, 2): Error occurs in the template of component AppComponent.

相关代码

组件装饰器导入(app.component.ts)

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { RouterModule } from '@angular/router';
import { MatTableModule } from '@angular/material/table';
import { MatCardModule } from '@angular/material/card';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterModule,
    RouterOutlet,
    CommonModule,
    MatButtonModule,
    MatGridListModule,
    MatCardModule,
    MatTableModule,
  ],
  providers: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent{
  title = 'Title';
  // More properties here...
}

模板使用示例(app.component.html)

<mat-card> 
    <mat-card-content>
        <!-- Content here... -->
    </mat-card-content>  
</mat-card>

main.ts代码

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

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

已尝试方案

  • 更新重装Angular Material
  • 清理缓存、重建文件
    以上操作均未解决问题。

补充说明

  • 在Stackblitz及新创建的Angular CLI项目中可正常运行
  • 当前项目通过Razor页面嵌入现有C#项目,希望修复当前项目而非新建
  • 计划尝试新建项目测试

内容的提问来源于stack exchange,提问作者Bastyy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.21 14:21:08