我在导入模块部分附近得到了这个。找不到模块"@angular/material/form field"或其相应的类型声明。
这是我的密码。MatFormFieldModule不像其他模块那样以绿色突出显示。它就是无法导入。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { FormsComponent } from './forms/forms.component';
import { ContactComponent } from './contact/contact.component';
import { ForgotComponent } from './forgot/forgot.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import { Header1Component } from './header1/header1.component';
import { Header2Component } from './header2/header2.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatFormFieldModule} from '@angular/material/form-field';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
LandingPageComponent,
FormsComponent,
ContactComponent,
ForgotComponent,
DashboardComponent,
Header1Component,
Header2Component,
UserProfileComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
BrowserAnimationsModule,
MatFormFieldModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<mat-form-field appearance="fill">
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
<mat-option>None</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
pacakge.json
{
"name": "ang-front-end",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.1.0",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@fortawesome/angular-fontawesome": "^0.7.0",
"@fortawesome/fontawesome-free": "^5.14.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"font-awesome": "^4.7.0",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1001.0",
"@angular/cli": "~10.1.0",
"@angular/compiler-cli": "~10.1.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
VS代码问题选项卡
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/app.module.ts",
"owner": "typescript",
"code": "2307",
"severity": 8,
"message": "Cannot find module '@angular/material/form-field' or its corresponding type declarations.",
"source": "ts",
"startLineNumber": 18,
"startColumn": 34,
"endLineNumber": 18,
"endColumn": 64
}
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/user-profile/user-profile.component.html",
"owner": "_generated_diagnostic_collection_name_#1",
"severity": 8,
"message": "'mat-form-field' is not a known element:n1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.n2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
"source": "ng",
"startLineNumber": 31,
"startColumn": 1,
"endLineNumber": 31,
"endColumn": 35
}
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/user-profile/user-profile.component.html",
"owner": "_generated_diagnostic_collection_name_#1",
"severity": 8,
"message": "'mat-label' is not a known element:n1. If 'mat-label' is an Angular component, then verify that it is part of this module.n2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
"source": "ng",
"startLineNumber": 32,
"startColumn": 3,
"endLineNumber": 32,
"endColumn": 14
}
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/user-profile/user-profile.component.html",
"owner": "_generated_diagnostic_collection_name_#1",
"severity": 8,
"message": "'mat-select' is not a known element:n1. If 'mat-select' is an Angular component, then verify that it is part of this module.n2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
"source": "ng",
"startLineNumber": 33,
"startColumn": 3,
"endLineNumber": 33,
"endColumn": 36
}
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/user-profile/user-profile.component.html",
"owner": "_generated_diagnostic_collection_name_#1",
"severity": 8,
"message": "Can't bind to 'value' since it isn't a known property of 'mat-select'.n1. If 'mat-select' is an Angular component and it has 'value' input, then verify that it is part of this module.n2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.",
"source": "ng",
"startLineNumber": 33,
"startColumn": 15,
"endLineNumber": 33,
"endColumn": 35
}
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/user-profile/user-profile.component.html",
"owner": "_generated_diagnostic_collection_name_#1",
"severity": 8,
"message": "'mat-option' is not a known element:n1. If 'mat-option' is an Angular component, then verify that it is part of this module.n2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
"source": "ng",
"startLineNumber": 34,
"startColumn": 5,
"endLineNumber": 34,
"endColumn": 17
}
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/user-profile/user-profile.component.html",
"owner": "_generated_diagnostic_collection_name_#1",
"severity": 8,
"message": "'mat-option' is not a known element:n1. If 'mat-option' is an Angular component, then verify that it is part of this module.n2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
"source": "ng",
"startLineNumber": 35,
"startColumn": 5,
"endLineNumber": 35,
"endColumn": 33
}
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/user-profile/user-profile.component.html",
"owner": "_generated_diagnostic_collection_name_#1",
"severity": 8,
"message": "'mat-option' is not a known element:n1. If 'mat-option' is an Angular component, then verify that it is part of this module.n2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
"source": "ng",
"startLineNumber": 36,
"startColumn": 5,
"endLineNumber": 36,
"endColumn": 33
}
{
"resource": "/c:/Users/ASUS/Downloads/SH Folder/Work/Indsys/iLabel Project/iLabel-project/src/app/user-profile/user-profile.component.html",
"owner": "_generated_diagnostic_collection_name_#1",
"severity": 8,
"message": "'mat-option' is not a known element:n1. If 'mat-option' is an Angular component, then verify that it is part of this module.n2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
"source": "ng",
"startLineNumber": 37,
"startColumn": 5,
"endLineNumber": 37,
"endColumn": 33
}
您需要安装Angular Material才能使用Material Components
ng add @angular/material
有关角材料的更多信息，请查看此Getting Angular Material
我在你的包中没有看到有棱角的材料包.json
试试这个：
npm i @angular/material