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
相关产品推荐
相关产品推荐

