3

I have added MatButtonToggleModule to app.module.ts. Even after that is is showing mat-button-toggle is not a known element. I have restarted my code editor, I ran npm install. even after doing these it is still showing the same. I have also checked other solutions but everything is saying to just import the MatButtonToggleModule from angular material.

I have attatched the error image

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from '@angular/forms'
import { AppComponent } from './app.component';
import { IonicModule } from '@ionic/angular';
import { environment } from '../environments/environment';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import {MatTooltipModule} from '@angular/material/tooltip';
import { DashComponent } from './components/dash/dash.component';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { LayoutModule } from '@angular/cdk/layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MiniCardComponent } from './components/dash/mini-card/mini-card.component';
import { NavComponent } from './components/nav/nav.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import {MatSelectModule} from '@angular/material/select';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ConfigurationComponent } from './components/configuration/configuration.component';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import { MatInputModule } from '@angular/material/input';
import {MatTreeModule} from '@angular/material/tree';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { FooterComponent } from './components/footer/footer.component';
import {MatDialogModule} from '@angular/material/dialog';
import { AccountComponent } from './components/account/account.component';
import { ConfirmPromptComponent } from './components/confirm-prompt/confirm-prompt.component';
import { CookieModule } from 'ngx-cookie';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { ServiceWorkerModule } from '@angular/service-worker';
import { UpdatePromptComponent } from './components/update-prompt/update-prompt.component';
import { NgChartsModule } from 'ng2-charts';
import { DatePipe } from '@angular/common'
import { JwtInterceptor } from './modules/authentication/helpers/jwt.interceptor';
import { ErrorInterceptor } from './modules/authentication/helpers/error.interceptor';
import { LoginComponent } from './modules/authentication/components/login/login.component';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatRadioModule} from '@angular/material/radio';

@NgModule({
  declarations: [
    AppComponent,    
    DashComponent,
    MiniCardComponent,
    NavComponent,
    ConfigurationComponent,
    LoginComponent,
    SidebarComponent,
    FooterComponent,
    AccountComponent,
    ConfirmPromptComponent,
    UpdatePromptComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule, 
    NgbModule,
    AppRoutingModule,
    MatTooltipModule,
    MatGridListModule,
    MatCardModule,
    MatMenuModule,
    MatIconModule,
    MatButtonModule,
    LayoutModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatSelectModule,
    HttpClientModule,
    MatDividerModule,
    MatExpansionModule,
    MatInputModule,
    MatTreeModule,
    MatDialogModule,
    MatButtonToggleModule,
    MatRadioModule,
    NgChartsModule,
    CookieModule.forRoot(),
    MatProgressSpinnerModule,
    ServiceWorkerModule.register('./ngsw-worker.js', {
      enabled: environment.production,
      // Register the ServiceWorker as soon as the app is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    })
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

    DatePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
[enter image description here][1]


  [1]: https://i.stack.imgur.com/GI7Qi.png
1
  • You have to import the module in the module which the component wherein you need it belongs to. May 25, 2022 at 11:01

1 Answer 1

1

I have checked your file and see that you have created a component called item-wise-report. This component doesn't have its own module, does it? It should be declared in the "app.module.ts". Otherwise, item-wise-report will not be able to use the MatButtonToggleModule imported in app.module.ts.

I hope it helps you, greetings.

2
  • It Helped but I got a new error. and again I am Stuck Cannot declare 'MatButtonToggleModule' in an NgModule as it's not a part of the current compilation.(-996001) button-toggle-module.d.ts(4, 5): 'MatButtonToggleModule' is declared here. This is the error May 26, 2022 at 5:31
  • I don't know what can happen now. Have you tried to compile the project again? Try to take a look at this github.com/angular/components/issues/7692. Cheers
    – Marc
    May 30, 2022 at 6:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.