Salut, je me sers de 6 angulaire et mon code est le suivant:
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';
import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
//import { MaterialModule } from 'src/app/et-shared/material.module';
const modules = [
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatRippleModule
];
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
RouterModule,
AppRoutingModule,
// MaterialModule,
...modules
],
exports:[
...modules
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
et html comme ça
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select">
<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
</div>
mon paquet comme ça
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^6.0.1",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.0.1",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
et j'arrive à cette erreur
'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. ("
<div class="example-container">
[ERROR ->]<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
"): ng:///AppRoutingModule/LoginComponent.html@7:2
'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. ("
</mat-form-field>
[ERROR ->]<mat-form-field>
<textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>
"): ng:///AppRoutingModule/LoginComponent.html@11:2
'mat-option' is not a known element:
1. If 'mat-option' is an Angular component, then verify that it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<mat-form-field>
<mat-select placeholder="Select">
[ERROR ->]<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
"): ng:///AppRoutingModule/LoginComponent.html@17:6
'mat-select' is not a known element:
1. If 'mat-select' is an Angular component, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
pourquoi j'arrive à cette erreur que je dois passer trop de fois pour résoudre cela mais ne pas trouver de solution là où je me trompe Je cherche aussi à déborder ici plusieurs trouvent la solution mais ne résolvent pas mon problème pouvez-vous m'aider s'il vous plaît aidez-moi à trouver à cette erreur
Merci d'avoir résolu mon problème
En regardant votre erreur ng:///AppRoutingModule/LoginComponent.html@11:2
je peux en conclure que vous avez déclaré LoginComponent
dans AppRoutingModule
mais que vous n’avez pas importé MatFormFieldModule
.
Déplacez LoginComponent
dans decrations
tableau de AppModule
:
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
...
})
export class AppModule { }
ou importer MatFormFieldModule
ou quelque SharedModule
dans AppRoutingModule
:
@NgModule({
declarations: [
LoginComponent,
...
],
imports: [
MatFormFieldModule // or SharedModule that exports MatFormFieldModule
...
]
...
})
export class AppRoutingModule { }
Voir également:
Essayez d'importer
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
dans votre module puis injecter dans
@NgModule({
//..your other property,
schemas: [CUSTOM_ELEMENTS_SCHEMA]
});
J'ai eu le même problème, le correctif pour moi est MatFormFieldModule, MatInputModule, MatSelectModule, ajouté à mon module Material.
import { MatFormFieldModule, MatInputModule } from '@angular/material';
@NgModule({
imports: [
MatFormFieldModule,
MatInputModule
]
})
export class AppModule { }
importer {CUSTOM_ELEMENTS_SCHEMA} depuis '@ angular/core';
et alors
@NgModule ({ // .. votre autre propriété,
schémas: [CUSTOM_ELEMENTS_SCHEMA] });