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

Angular中'mat-label'未知元素(NG8001)错误求助

错误NG8001:'mat-label' is not a known element 排查求助

我遇到错误NG8001:'mat-label' is not a known element,针对mat-label与输入组件的问题已排查一日仍未解决。查阅大量同类问题后发现,多数情况可通过导入正确模块解决,但此方法对我无效,怀疑可能存在版本兼容问题。我已尝试导入/导出所有可能需要的模块以让mat-label和输入组件正常工作,但即便如下简单HTML代码仍报错:

<mat-form-field appearance="fill" ngForm>
    <mat-label>Input</mat-label>
    <input matInput>
  </mat-form-field>
  <mat-form-field appearance="fill">
    <mat-label>Select</mat-label>                   <!-- 哪怕这段简单代码也会报错! -->
    <mat-select>
      <mat-option value="one">First option</mat-option>
      <mat-option value="two">Second option</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field appearance="fill" ngForm>
    <mat-label>Textarea</mat-label>
    <textarea matInput></textarea>
  </mat-form-field>

我的模块导入代码

EditableListModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { NgApexchartsModule } from 'ng-apexcharts';
import { MatRippleModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { FuseAlertModule } from '@fuse/components/alert';
import { ExampleModule } from 'app/modules/admin/dashboards/example-module.module';
import { SharedModule } from 'app/shared/shared.module';
import { EditableListRoutes } from './editable-list.routing';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

const modules = [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
    SharedModule,
    ExampleModule,
    FuseAlertModule,
    NgApexchartsModule,
    MatCheckboxModule,
    MatMomentDateModule,
    MatDatepickerModule,
    MatSelectModule,
    MatPaginatorModule,
    MatTabsModule,
    MatTableModule,
    MatSortModule,
    MatSidenavModule,
    MatMenuModule,
    MatIconModule,
    MatDividerModule,
    MatButtonToggleModule
];

@NgModule({
imports: [...modules,RouterModule.forChild(EditableListRoutes),],
exports: [...modules],
providers: [
    {
        provide: MAT_DATE_LOCALE,
        useValue: 'it-IT'
    }
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class EditableListModule {};

AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
import { MarkdownModule } from 'ngx-markdown';
import { FuseModule } from '@fuse';
import { FuseConfigModule } from '@fuse/services/config';
import { FuseMockApiModule } from '@fuse/lib/mock-api';
import { CoreModule } from 'app/core/core.module';
import { appConfig } from 'app/core/config/app.config';
import { mockApiServices } from 'app/mock-api';
import { LayoutModule } from 'app/layout/layout.module';
import { AppComponent } from 'app/app.component';
import { appRoutes } from 'app/app.routing';
import {FormsModule} from "@angular/forms";
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { EditableListModule } from './modules/admin/dashboards/editable-list/editable-list.module';

const routerConfig: ExtraOptions = {
    scrollPositionRestoration: 'enabled',
    preloadingStrategy       : PreloadAllModules,
    relativeLinkResolution   : 'legacy'
};

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports     : [
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(appRoutes, routerConfig),
        EditableListModule,

        // Fuse & Fuse Mock API
        FuseModule,
        FuseConfigModule.forRoot(appConfig),
        FuseMockApiModule.forRoot(mockApiServices),

        // Core
        CoreModule,

        FormsModule,

        // Layout
        LayoutModule,

        // 3rd party modules
        MarkdownModule.forRoot({})
    ],
    bootstrap   : [
        AppComponent
    ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {
}

环境版本信息

_                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    
Angular CLI: 11.2.11
Node: 18.12.1
OS: win32 x64

Angular: 11.2.12
... animations, common, compiler, compiler-cli, core, forms     
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------    
@angular-devkit/architect          0.1102.11
@angular-devkit/build-angular      0.1102.11
@angular-devkit/core               11.2.11
@angular-devkit/schematics         11.2.11
@angular/cdk                       11.2.11
@angular/cli                       11.2.11
@angular/material                  11.2.11
@angular/material-moment-adapter   11.2.11
@schematics/angular                11.2.11
@schematics/update                 0.1102.11
rxjs                               6.6.7
typescript                         4.1.5

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.07 04:50:22