'mat-slide-toggle' is not a known element after import

Question

I'm trying to use <mat-slide-toggle>Click me!</mat-slide-toggle>inside a component which already has MatSlideToggleModule imported, but I'm still getting the message that it's not a known element.

Angular version: 8.0.1

HTML Page (slide-page.html)

<div class="grid-slide-toggle-material"> 
  <mat-slide-toggle>Click me!</mat-slide-toggle>
</div>

Module (slide-page.module.ts)

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'projects/authenticator/src/shared/modules/material.module';
import { BasicModule } from 'src/app/shared/modules/basic/basic.module';
import { MatButtonToggleModule, MatButtonToggleGroup } from '@angular/material';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    MaterialModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
    MatButtonToggleModule,
    MatSlideToggleModule 
  ]
})
export class SlidePageModule { }

How is it possible that the html is not being recognized even after the imports in the item's module?

Ted

I got this error and then I noticed that my component was somehow declared in app.module although it was supposed to be in sub-module called admin. No idea how it got there. Fixing the declarations solved the issue – Ponytail

consider selecting accepted answer @Ted – Georgettegeorgi

Answer 1

As Daniel suggested, you need to add MatSlideToggleModule to your missing export in @NgModule.

But, please mind to write MatSlideToggleModule instead of MatSlideToogleModule.

In app.moudle.ts, add:

`import { MatSlideToggleModule } from '@angular/material/slide-toggle'`

inside @NgModule, imports, add:

MatSlideToggleModule 

Georgettegeorgi

Answer 2

try to add MatSlideToogleModule to your missing export in @NgModule.

Adding one more idea. Where do you have declared a component? Assume that your component is calling slidePageComponent.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'projects/authenticator/src/shared/modules/material.module';
import { BasicModule } from 'src/app/shared/modules/basic/basic.module';
import { MatButtonToggleModule, MatButtonToggleGroup } from '@angular/material';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { SlidePageComponent } from './component/slide-page.component'

@NgModule({
  declarations: [
  SlidePageComponent
],
  imports: [
    MaterialModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
    MatButtonToggleModule,
    MatSlideToggleModule 
  ],
exports: [
    MatSlideToggleModule 
]
})
export class SlidePageModule { }

Cacogenics

Tried it out, still receiving "is not a known element" – Ted

I edit my example. Look for declarations - you missing in declaration import of your slide-page-component.ts Its just example your file path can be different. Let me know if this helps you. – Pectase