CODEWITHSUNDEEP
angularvisual-studio-codeangular-material
happyZZR1400
happyZZR1400

Reputation: 2405

Angular Material components not recognized by VSCode (highlighted be red color)

I'm using Visual Studio Code when developing an Angular v6 project (based on this starter), which includes the Angular Material module.

The project compiles and runs well, but in the editor, Angular Material components are not recognized:

Unrecognized components

I guess the problem of recognition is because material module not imported to the module directly, but imports "shared" module which imports material, but maybe I'm missing something .

Any help will be appreciated

Upvotes: 0

Views: 2565

Answers (2)

Edric
Edric

Reputation: 26730

Did you import MatIconModule in your app's main module/material module?

material.module.ts

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

app.module.ts

import { MaterialModule } from './material.module';
// Other imports

@NgModule({
  imports: [
    MaterialModule
    // ...
  ]
  // ...
})
export class AppModule { }

Alternatively (assuming you don't have a material module):

app.module.ts

import { MatIconModule } from '@angular/material/icon';
// Other imports

@NgModule({
  imports: [
    MatIconModule
    // ...
  ]
  // ...
})
export class AppModule { }

Upvotes: 2

Daddelbob
Daddelbob

Reputation: 416

Import the JS Module

import { MaterialIconsModule } from 'ionic2-material-icons';

Import it in angular imports

 @NgModule({
  declarations: [MyApp],
  imports: [
    MaterialIconsModule
  ],

Some times VSCode needs a restart to recognize such changes.

Upvotes: 0

Related Questions