I am trying to follow the following tutorial, but I keep the getting the error
ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[MatTable -> _CoalescedStyleScheduler]:
StaticInjectorError(Platform: core)[MatTable -> _CoalescedStyleScheduler]:
NullInjectorError: No provider for _CoalescedStyleScheduler!
thrown out and the page does not render fully. My source code is the following:
<mat-paginator [length] = "100" [pageSize] = "10" [pageSizeOptions] = "[5, 10, 25, 100]" (page) = "pageEvent = $event"></mat-paginator>
Yes, I did import all the required modules as stated in the tutorial.
UPDATE Here are my dependencies:
"dependencies": {
"@angular/animations": "^10.0.2",
"@angular/cdk": "^10.1.2",
"@angular/common": "^10.0.2",
"@angular/compiler": "^10.0.2",
"@angular/core": "^10.0.2",
"@angular/forms": "^10.0.2",
"@angular/localize": "^10.0.2",
"@angular/material": "^10.0.1",
"@angular/platform-browser": "^10.0.2",
"@angular/platform-browser-dynamic": "^10.0.2",
"@angular/router": "^10.0.2",
"angular-bootstrap-md": "^9.3.1",
"angular-in-memory-web-api": "^0.11.0",
"angular-tree-component": "^8.5.6",
"any-observable": "^0.5.1",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"json-server": "^0.16.1",
"mongoose": "^5.9.15",
"ng-mat-search-bar": "^9.0.0",
"ng-multiselect-dropdown": "^0.2.10",
"ng2-search-filter": "^0.5.1",
"rxjs": "^6.5.5",
"subscribable": "^0.4.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
UPDATE 2 After importing the _CoalescedStyleScheduler I get the following error:
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@angular/cdk/table/coalesced-style-scheduler' in 'C:\Users\Username\Documents\Project1\frontend\src\app'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
UPDATE 3 My app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { NgMatSearchBarModule } from 'ng-mat-search-bar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md';
import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
import { WorkDocumentComponent } from './work-document/work-document.component';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import { TabArchiveMailOrderComponent } from './tab-archive-mail-order/tab-archive-mail-order.component';
import { TabDataContextComponent } from './tab-data-context/tab-data-context.component';
import { TabReceiverComponent } from './tab-receiver/tab-receiver.component';
import { TabSenderComponent } from './tab-sender/tab-sender.component';
import { TabTemplatesComponent } from './tab-templates/tab-templates.component';
import { DialogCancelComponent } from './dialog-cancel/dialog-cancel.component';
import { DialogLoadingComponent } from './dialog-loading/dialog-loading.component';
import { TabMainComponent } from './tab-main/tab-main.component';
import { DialogTemplateCancelComponent } from './dialog-template-cancel/dialog-template-cancel.component';
import {MatTabsModule} from '@angular/material/tabs';
import {MatSelectModule} from '@angular/material/select';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatInputModule} from '@angular/material/input';
import {MatTreeModule} from '@angular/material/tree';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatRadioModule} from '@angular/material/radio';
import {MatDividerModule, MatDivider} from '@angular/material/divider';
import { LoginComponent } from './login/login.component';
import { NotFoundPageComponent } from './not-found-page/not-found-page.component';
import { GlobalDataService } from './services/global-data.service';
import { TonicViewerComponent } from './tonic-viewer/tonic-viewer.component';
import { ModalModule } from './_modal';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { _CoalescedStyleScheduler } from '../../node_modules/@angular/cdk/table/coalesced-style-scheduler';
@NgModule({
declarations: [
AppComponent,
WorkDocumentComponent,
TabArchiveMailOrderComponent,
TabDataContextComponent,
TabReceiverComponent,
TabSenderComponent,
TabTemplatesComponent,
DialogCancelComponent,
DialogLoadingComponent,
TabMainComponent,
DialogTemplateCancelComponent,
LoginComponent,
NotFoundPageComponent,
TonicViewerComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule,
MDBBootstrapModule.forRoot(),
Ng2SearchPipeModule,
NgMatSearchBarModule,
BrowserAnimationsModule,
MatInputModule,
WavesModule,
InputsModule,
ButtonsModule,
HttpClientModule,
MatIconModule,
MatTableModule,
MatCheckboxModule,
MatSortModule,
MatTabsModule,
MatSelectModule,
MatCheckboxModule,
MatInputModule,
MatTreeModule,
MatButtonModule,
MatDialogModule,
MatProgressBarModule,
MatDatepickerModule,
MatNativeDateModule,
MatTooltipModule,
MatRadioModule,
MatDividerModule,
ModalModule,
MatPaginatorModule,
MatProgressSpinnerModule
],
entryComponents: [
DialogCancelComponent,
DialogTemplateCancelComponent
],
providers: [
MatDatepickerModule,
{provide: MAT_DATE_LOCALE, useValue: 'en-US'},
GlobalDataService,
_CoalescedStyleScheduler
],
bootstrap: [AppComponent]
})
export class AppModule {
title = 'App';
}