由於導入 Angular Material 模塊導致 Angular Static Injector 和 Null Injector 錯誤

Question

NullInjectorError: StaticInjectorError(AppModule)[A11yModule -> HighContrastModeDetector]: StaticInjectorError(Platform: core)[A11yModule -> HighContrastModeDetector]: NullInjectorError: 沒有提供 HighContrastModeDetector！ 在 NullInjector.get ( http://localhost:4200/vendor.js:66167:27 ) 在 resolveToken ( http://localhost:4200/vendor.js:81085:24 ) 在 tryResolveToken ( http://localhost:4200 /vendor.js:81011:16 ) 在 StaticInjector.get ( http://localhost:4200/vendor.js:80861:20 ) 在 resolveToken ( http://localhost:4200/vendor.js:81085:24 ) 在tryResolveToken ( http://localhost:4200/vendor.js:81011:16 ) 在 StaticInjector.get ( http://localhost:4200/vendor.js:80861:20 ) 在 resolveNgModuleDep ( http://localhost:4200/ vendor.js:92048:29 ) 在 _createClass ( http://localhost:4200/vendor.js:92118:29 ) 在 _createProviderInstance ( http://localhost:4200/vendor.js:92081:26 ) (匿名) @ main.ts:12 invoke @ zone-evergreen.js:359 run @ zone-evergreen.js:124（匿名）@ zone-evergreen.js:855 invokeTask @ zone-evergreen.js:391 runTask @ zone-evergreen.js :168drainMicroTaskQueue @ 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 然后@ 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（匿名）@ main.js:1 client:52 [WDS] Live

重新加載啟用。

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 文件 : :::

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{}

節點版本：v11.3.0 NPM：v6.4.1 angular cli：8.3.25 Angular 材質：9.1.1

Answer 1

成立。

Angular Cli、cdk 和材質版本不匹配，在新的 angular 9 中不支持舊版本材質