如何解决NullInjectorError:_CoalescedStyleScheduler
我正在尝试遵循following tutorial,但我不断收到错误消息
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>
是的,我确实按照教程中的说明导入了所有必需的模块。
更新 这是我的依赖项:
"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"
},
更新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,ButtonsModule,HttpClientModule,MatIconModule,MatTableModule,MatCheckboxModule,MatSortModule,MatTabsModule,MatSelectModule,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:material和cdk之间的版本差异
package.json 中的@angular/cdk
和@angular/material
具有足够不同的版本要求,导致cdk> 10.0.2和材料
要解决:请确保您使用的cdk和材料版本相同。这些程序包似乎只能相互锁定测试。
问题2:某些东西继承自CdkTable(原始答案)
我假设您在某处覆盖了CdkTable或MatTable或使用了这样做的库。
您必须在提供程序中提供_CoalescedStyleScheduler以实现该覆盖,就像在MatTable本身中所做的一样:
您必须执行此操作,或将具有CdkTable实现的库升级到具有以下功能的版本:
,@ angular / cdk在CdkTable中引入了_CoalescedStyleScheduler,MatTable在10.0.2和更高版本之间实现了该功能。
要在新版本中使用MatTable,您必须将@ angular / material更新为27.7.2020或更高版本。
为保持兼容性,通常将@ angular / material与@ angular / cdk的版本保持一致。
在https://github.com/angular/components/commit/ef8fc4f98c984825401cb10456782a66c663e4ef#diff-0fa17bba051db8d8fefff13603d28575的mat-table.ts中查看相关的提交
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。