Angular Static Injector and Null Injector error due to import of Angular Material module

Question

NullInjectorError: StaticInjectorError(AppModule)[A11yModule -> HighContrastModeDetector]: StaticInjectorError(Platform: core)[A11yModule -> HighContrastModeDetector]: NullInjectorError: No provider for HighContrastModeDetector! at NullInjector.get (http://localhost:4200/vendor.js:66167:27) at resolveToken (http://localhost:4200/vendor.js:81085:24) at tryResolveToken (http://localhost:4200/vendor.js:81011:16) at StaticInjector.get (http://localhost:4200/vendor.js:80861:20) at resolveToken (http://localhost:4200/vendor.js:81085:24) at tryResolveToken (http://localhost:4200/vendor.js:81011:16) at StaticInjector.get (http://localhost:4200/vendor.js:80861:20) at resolveNgModuleDep (http://localhost:4200/vendor.js:92048:29) at _createClass (http://localhost:4200/vendor.js:92118:29) at _createProviderInstance (http://localhost:4200/vendor.js:92081:26) (anonymous) @ main.ts:12 invoke @ zone-evergreen.js:359 run @ zone-evergreen.js:124 (anonymous) @ zone-evergreen.js:855 invokeTask @ zone-evergreen.js:391 runTask @ zone-evergreen.js:168 drainMicroTaskQueue @ zone-evergreen.js:559 Promise.then (async) scheduleMicroTask @ zone-evergreen.js:542 scheduleTask @ zone-evergreen.js:381 scheduleTask @ zone-evergreen.js:211 scheduleMicroTask @ zone-evergreen.js:231 scheduleResolveOrReject @ zone-evergreen.js:845 then @ zone-evergreen.js:955 bootstrapModule @ core.js:40600 ./src/main.ts @ main.ts:11 webpack_require @ bootstrap:79 0 @ main.ts:12 webpack_require @ bootstrap:79 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1 client:52 [WDS] Live

Reloading enabled.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MaterialModule} from './modules/material.module' ;


import { AppComponent } from './app.component';
import { QuestionComponent } from './components/question/question.component';
import { CategoriesComponent } from './components/categories/categories.component';
import { TagListsComponent } from './components/tag-lists/tag-lists.component';
import {CategoriesService} from './services/categories.service' ;
import {QuestionService} from './services/question.service' ;
import {TagListService} from './services/tagList.service' ;
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
    QuestionComponent,
    CategoriesComponent,
    TagListsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [CategoriesService, QuestionService, TagListService],
  bootstrap: [AppComponent]
})
export class AppModule { }

material.module.ts file : :::

import {NgModule} from '@angular/core' 
import {MatCardModule} from '@angular/material/card'
import {MatCheckboxModule} from '@angular/material/checkbox'
import {MatChipsModule} from '@angular/material/chips'
import {MatCommonModule} from '@angular/material/core'
import {MatDatepickerModule} from '@angular/material/datepicker'
import {MatDialogModule} from '@angular/material/dialog'
import {MatDividerModule} from '@angular/material/divider'
import {MatExpansionModule} from '@angular/material/expansion'
import {MatFormFieldModule} from '@angular/material/form-field'
import {MatGridListModule} from '@angular/material/grid-list'
import {MatIconModule} from '@angular/material/icon'
import {MatInputModule} from '@angular/material/input'
import {MatListModule} from '@angular/material/list'
import {MatMenuModule} from '@angular/material/menu'
import {MatPaginatorModule} from '@angular/material/paginator'
import {MatProgressBarModule} from '@angular/material/progress-bar'
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
import {MatRadioModule} from '@angular/material/radio'
import {MatSelectModule} from '@angular/material/select'
import {MatSidenavModule} from '@angular/material/sidenav'
import {MatSlideToggleModule} from '@angular/material/slide-toggle'
import {MatSliderModule} from '@angular/material/slider'
import {MatSnackBarModule} from '@angular/material/snack-bar'
import {MatSortModule} from '@angular/material/sort'
import {MatStepperModule} from '@angular/material/stepper'
import {MatTableModule} from '@angular/material/table'
import {MatTabsModule} from '@angular/material/tabs'
import {MatToolbarModule} from '@angular/material/toolbar'
import {MatTooltipModule} from '@angular/material/tooltip'
import {MatTreeModule} from '@angular/material/tree'
import {MatAutocompleteModule} from '@angular/material/autocomplete'
import {MatBadgeModule} from '@angular/material/badge'
import {MatBottomSheetModule} from '@angular/material/bottom-sheet'
import {MatButtonModule} from '@angular/material/button'
import {MatButtonToggleModule} from '@angular/material/button-toggle'

@NgModule({
    imports : [
        MatCardModule,
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatCommonModule,
        MatDatepickerModule,
        MatDialogModule,
        MatDividerModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatSidenavModule,
        MatSlideToggleModule,
        MatSliderModule,
        MatSnackBarModule,
        MatSortModule,
        MatStepperModule,
        MatSelectModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule

    ] ,
    exports : [
        MatCardModule,
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatCommonModule,
        MatDatepickerModule,
        MatDialogModule,
        MatDividerModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatSidenavModule,
        MatSlideToggleModule,
        MatSliderModule,
        MatSnackBarModule,
        MatSortModule,
        MatStepperModule,
        MatSelectModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule
    ] ,
    providers : []
})
export class MaterialModule{}

Node version : v11.3.0 NPM : v6.4.1 angular cli : 8.3.25 Angular material : 9.1.1

Drupad Singh Drupad Singh · Accepted Answer · 2020-03-10T16:23:34

Found.

Angular Cli, cdk and material version mismatch, In new angular 9 support for older version material is not available

Angular Static Injector and Null Injector error due to import of Angular Material module

1 Answers