'mat-form-field' ist kein bekanntes Element - Angular 5 & Material2

72

Ich versuche, <mat-form-field>Material2 in einem Angular-Projekt zu verwenden, aber ich bin gegen eine Wand gestoßen.

Die folgende Fehlermeldung wird angezeigt.

Uncaught Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-form-field>
  <input matInput placeholder="Simple placeholder" required>
</mat-form-field>"): ng:///MaterialModule/SearchComponent.html@0:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24660)
    at JitCompiler._parseTemplate (compiler.js:34471)
    at JitCompiler._compileTemplate (compiler.js:34446)
    at eval (compiler.js:34347)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34347)
    at eval (compiler.js:34217)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34216)

Das ist mein Code, den ich habe.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { YahooService } from './yahoo.service';
import { SearchComponent } from './search/search.component';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})
export class MaterialModule {};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
  ],
  providers: [
    YahooService,
  ],
  bootstrap: [
    AppComponent,
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
  ],
})
export class AppModule { }

search.component.html

<mat-form-field>
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

search.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  options: FormGroup;

  constructor(fb: FormBuilder) {
    this.options = fb.group({
      floatLabel: 'never',
    });
  }

  ngOnInit() {
  }

}

package.json

{
  "name": "forecast",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/schematics": "0.0.40",
    "@angular/animations": "^5.1.3",
    "@angular/cdk": "^5.0.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/material": "^5.0.3",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/router": "^5.1.3",
    "axios": "^0.17.1",
    "body-parser": "^1.18.2",
    "core-js": "^2.5.3",
    "express": "^4.16.2",
    "node-sass": "^4.7.2",
    "nodemon": "^1.14.7",
    "q": "^1.5.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.1.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.4.0"
  }
}
angular typescript angular-material2 Massimo Frittelli
quelle

Antworten:

105

Sie exportieren es nur in Ihr NgModule, Sie müssen es auch importieren

@NgModule({
  imports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
 ]
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})export class MaterialModule {};

noch besser

const modules = [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule
];

@NgModule({
  imports: [...modules],
  exports: [...modules]
  ,
})export class MaterialModule {};

aktualisieren

Sie deklarieren die Komponente (SearchComponent) abhängig von Angular Material, bevor alle Angular-Abhängigkeiten importiert werden

Mögen BrowserAnimationsModule

Versuchen Sie es in MaterialModule oder davor zu verschieben

Iancovici
quelle
1
Aber soweit ich weiß, exportsimportiert das Auflisten eines Moduls in das Modul automatisch in das Modul, um zu vermeiden, dass sich der Code wiederholt
Armen Vardanyan
1
@ArmenVardanyan Beim Exportieren aus z. B. Modul A wird es anderen Modulen zur Verfügung gestellt, die Modul A importieren, jedoch nicht Modul A selbst. Es muss auch importiert werden.
Kirk Larkin
1
@iancovici Wenn ich versuche, das const modulesArray einzurichten, wird die Fehlermeldung "Kann nicht finden (Modulname)" angezeigt. Wie verwenden Sie dies?
Steve
1
Zu Ihrer Information: Für diejenigen, die neugierig sind, sind drei Punkte (…) im Code entweder Ruheparameter oder der Spread-Operator. In diesem Fall handelt es sich um einen "Spread-Operator", der ein Array zu einer Liste erweitert.
Konyak
15

Sie versuchen, das MatFormFieldComponentIn zu verwenden SearchComponent, importieren aber nicht das MatFormFieldModule(welches exportiert)MatFormFieldComponent ). Sie exportieren es nur.

Sie MaterialModulemüssen es importieren.

@NgModule({
  imports: [
    MatFormFieldModule,
  ],
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})
export class MaterialModule { }
Lazar Ljubenović
quelle
12

Bei Verwendung des 'mat-form-field' muss auch MatInputModule importiert werden

import { 
    MatToolbarModule, 
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule ,
    MatStepperModule,
    MatInputModule
} from '@angular/material';
Prasanth Nath
quelle
4

Das Problem liegt im MatInputModule:

exports: [
    MatInputModule
  ]
Leo Lanese
quelle
2

Wenn Sie MatAutocompleteModule in Ihrer Winkelanwendung verwenden, müssen Sie das Eingabemodul auch in app.module.ts importieren

Bitte unten importieren:

{MatInputModule} aus '@ angle / material' importieren;

Santhosh Raj Mudulakar
quelle
1 
@NgModule({
  declarations: [
    SearchComponent
  ],
  exports: [
    CommonModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatDialogModule,
  ]
})
export class MaterialModule { }

Vergessen Sie auch nicht, das MaterialModuleim Import-Array von zu importieren AppModule.

Monu Chaudhary
quelle
0

Überprüfen Sie den Namespace, aus dem wir importieren

import { MatDialogModule } from **"@angular/material/dialog";**
import { MatCardModule } from **"@angular/material/card";**
import { MatButtonModule } from **"@angular/material/button";**
Alexander Zaldostanov
quelle
-1

Ich hatte auch dieses Problem. Es stellte sich heraus, dass ich vergessen hatte, eine der Komponenten in app.module.ts aufzunehmen

Mars Z.
quelle