我在导入“物料表单字段模块”时遇到问题。我越来越如何解决此问题？

时间：2020-09-22 07:59:12

标签： angular angular-material

我正在“导入模块”部分附近找到它。找不到模块“ @ 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
}

2 个答案:

答案 0 :(得分：2)

您需要安装Angular Material才能使用Material Components 

ng add @angular/material

有关Angular材质的更多信息，请检查此Getting Angular Material

答案 1 :(得分：1)

我在您的package.json中看不到有角度的材料包

尝试：

 npm i @angular/material
相关问题
最新问题