Fatal编程技术网
  • angular/
  • Angular NullInjectorError:没有_CoalescedStyleScheduler的提供程序

Angular NullInjectorError:没有_CoalescedStyleScheduler的提供程序

angular typescript pagination

Angular NullInjectorError:没有_CoalescedStyleScheduler的提供程序,angular,typescript,pagination,Angular,Typescript,Pagination,我试着跟随，但我一直在得到错误 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[MatTable -> _CoalescedStyleScheduler]: StaticInjectorError(Platform: core)[MatTable -> _CoalescedStyleScheduler]: NullInjectorError: No p

我试着跟随，但我一直在得到错误

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[MatTable -> _CoalescedStyleScheduler]: 
  StaticInjectorError(Platform: core)[MatTable -> _CoalescedStyleScheduler]: 
 NullInjectorError: No provider for _CoalescedStyleScheduler!
抛出，页面无法完全呈现。我的源代码如下：

<mat-paginator [length] = "100" [pageSize] = "10" [pageSizeOptions] = "[5, 10, 25, 100]" (page) = "pageEvent = $event"></mat-paginator>
更新2 导入_CoalescedStyleScheduler后，我出现以下错误：

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'
更新3 我的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';

 }
从10.0.0更新到10.0.8后得到了这个。看起来这是libs兼容性问题–在将cdk从“^10.1.2”降级到10.0.2之后，错误已经消失了。

编辑：很明显，您可能会看到这一点还有第二个原因（我刚刚在正在开发的应用程序的分支上看到）

我现在看到了两种产生这种效果的方法：

问题1：材质和cdk之间的版本差异
在package.json
@angular/cdk
和
@angular/material
中，有足够不同的版本要求，导致cdk>10.0.2，而MatTable实现10.0.2和更高版本之间的某个地方，在CdkTable中引入了@angular/cdk联合样式调度器

为了在新版本中使用MatTable，您必须将@angular/material更新为27.7.2020或更高版本

为了兼容性，通常将@angular/材质与@angular/cdk保持相同的版本

请参见mat-table.ts中的相关提交，网址为

\u CoalescedStyleScheduler这是您拥有的自定义服务吗？@JoharZaman否，它肯定不是自定义服务该服务是在angular material中定义的。@Munchkin您正在运行angular的哪个版本？能否添加完整错误？请尝试在提供程序中添加
\u CoalescedStyleScheduler
。添加提供程序不起作用..似乎user656449的解决方案是正确的..好的，我必须诚实地说，我没有尝试那种特定的链接语法..谢谢，这对我很有效！注意，Intellij抱怨@angular/cdk/table没有导出任何名为_CoalescedStyleScheduler的内容，但是编译器很高兴，并且错误被忽略了再也没有了。 
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';

 }