‘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

  angular, angular-material

I’ve been trying to juggle around the articles to use Angular material, but still in vain.
Everytime I include any mat-input I get an error, even though I already imported all of its dependencies.
here is the component in which my code exists

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input matInput placeholder="Favorite food" value="Sushi">
    </mat-form-field>

    <mat-form-field class="example-full-width">
        <textarea matInput placeholder="Leave a comment"></textarea>
    </mat-form-field>
</form>

here is my app.module.ts. You can see I already imported all the relevant dependencies but it sill gives me error

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
// import { MatButtonModule } from '@angular/material/button';
import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import 'hammerjs';

import { FuseModule } from '@fuse/fuse.module';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';

import { fuseConfig } from 'app/fuse-config';

import { AppComponent } from 'app/app.component';
import { LayoutModule } from 'app/layout/layout.module';
import { SampleModule } from 'app/main/sample/sample.module';
import { AddSalesPersonComponent } from './layout/add-sales-person/add-sales-person.component';

const appRoutes: Routes = [
    {
        path: 'addSalesPerson',
        component: AddSalesPersonComponent
    },
    {
        path: '**',
        redirectTo: 'sample'
    }
];

@NgModule({
    declarations: [
        AppComponent,
AddSalesPersonComponent 
    ],
    imports: [
        BrowserModule,
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule,
        BrowserAnimationsModule,
        HttpClientModule,
        RouterModule.forRoot(appRoutes),

        TranslateModule.forRoot(),

        // Material moment date module
        MatMomentDateModule,

        // Material
        MatButtonModule,
        MatIconModule,

        // Fuse modules
        FuseModule.forRoot(fuseConfig),
        FuseProgressBarModule,
        FuseSharedModule,
        FuseSidebarModule,
        FuseThemeOptionsModule,

        // App modules
        LayoutModule,
        SampleModule
    ],
    exports: [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule,

    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

Source: New feed
Source Url ‘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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.