Angular 9 延迟加载组件错误：没有 InjectionToken mat-autocomplete-scroll-strategy 的提供程序

Question

我将我的项目从 Angular 8 升级到 9，并重构了我的代码以利用延迟加载组件的能力。对于我的大多数组件来说，这都非常有效，但我有一个组件抛出错误，我需要帮助解决该问题。

\n\n

这是我的组件代码，后面是错误。该模块与组件在同一文件中定义。

\n\n

\n    import { Component, OnInit, OnDestroy, NgModule } from \'@angular/core\';\n    import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from \'@angular/forms\';\n    import { switchMap, debounceTime, tap, filter } from \'rxjs/operators\';\n    import { MatFormFieldModule, MatInputModule, MatAutocompleteModule, MatButtonModule, MatProgressSpinnerModule, MatIconModule, MatDialogModule } from \'@angular/material\';\n\n    import { SearchService } from \'./search.service\';\n    import { SuggestResult } from \'./suggest-result\';\n    import { CommonModule } from \'@angular/common\';\n    import { HttpClientModule } from \'@angular/common/http\';\n    import { SharedModule } from \'src/app/shared/shared.module\';\n\n    @Component({\n        selector: \'app-search\',\n        templateUrl: \'./search.component.html\',\n        styleUrls: [\'./search.component.scss\'],\n        providers: [ FormBuilder]\n    })\n    export class SearchComponent implements OnInit, OnDestroy {\n\n    //code removed\n\n    }\n\n    @NgModule({\n        imports: [\n            CommonModule,\n            HttpClientModule,\n            FormsModule,\n            ReactiveFormsModule,\n            MatFormFieldModule,\n            MatInputModule,\n            MatAutocompleteModule,\n            MatButtonModule,\n            MatProgressSpinnerModule,\n            MatIconModule,\n            SharedModule,\n            MatDialogModule\n        ],\n        declarations: [SearchComponent]\n    })\n    export class SearchModule { }\n

\n\n

    <div>\n        <div class="form-container">\n            <form [formGroup]=\'resultsForm\'>\n                <mat-form-field [class.mat-form-field-invalid]="!formFieldValid">\n                    <input matInput placeholder="Search term" type="search" [matAutocomplete]="SearchAuto" formControlName=\'SearchUserInput\'>\n                </mat-form-field>\n\n                <div *ngIf="!formFieldValid" class="error-msg"> {{ errorMessage }} </div>\n\n                <mat-autocomplete #SearchAuto="matAutocomplete" [displayWith]="getSelectedText"\n                    (optionSelected)=\'onItemSelected($event.option.value)\'>\n                    <mat-option *ngIf="isLoading" class="is-loading">\n                        <mat-spinner mode="indeterminate" diameter="25"></mat-spinner>\n                    </mat-option>\n\n                    <ng-container *ngIf="!isLoading">\n                        <mat-option *ngFor="let result of filteredResults" [value]="result">\n                            <span>{{ result.name }}</span>\n                        </mat-option>\n                    </ng-container>\n                </mat-autocomplete>\n           </form>\n            <mat-icon>search</mat-icon>\n            <button mat-button *ngIf="isNotEmpty()" matSuffix mat-icon-button aria-label="Clear" (click)="clearSearch()">\n                <mat-icon>close</mat-icon>\n            </button>\n        </div>\n    </div>\n

\n\n

错误：

\n\n

\n

null：错误：未捕获（承诺）：NullInjectorError：\n R3InjectorError（AppModule）[InjectionToken\n mat-autocomplete-scroll-strategy -> InjectionToken\n mat-autocomplete-scroll-strategy -> InjectionToken\n mat-autocomplete-滚动策略]：NullInjectorError：没有 InjectionToken mat-autocomplete-scroll-strategy 的提供程序\n！\n ./node_modules/@angular/core/ ivy_ngcc /fesm5/core.js/NullInjector.prototype.get@http//localhost :4200/vendor.js:37066:25"\n ./node_modules/@angular/core/ ivy_ngcc /fesm5/core.js/R3Injector.prototype.get@http//localhost:4200/vendor.js:47422:33 \n ./node_modules/@angular/core/ ivy_ngcc /fesm5/core.js/R3Injector.prototype.get@http//localhost:4200/vendor.js:47422:33\n ./node_modules/@angular/core/ ivy_ngcc /fesm5/core.js/R3Injector.prototype.get@http//localhost:4200/vendor.js:47422:33\n ./node_modules/@angular/core/ ivy_ngcc/fesm5/core.js/NgModuleRef$1.prototype.get@http//localhost:4200/vendor.js:60382:33\n get@http//localhost:4200/vendor.js:58703:35\n getOrCreateInjectable@ http://localhost:4200/vendor.js:39763:39\n \xc9\xb5\xc9\xb5directiveInject@http//localhost:4200/vendor.js:50290:12\n MatAutocompleteTrigger_Factory@http//localhost:4200/ vendor.js:76965:788\n getNodeInjectable@http://localhost:4200/vendor.js:39871:44\n searchTokensOnInjector@http//localhost:4200/vendor.js:39807:16\n getOrCreateInjectable@http//本地主机：4200/vendor.js:39729:58\n \xc9\xb5\xc9\xb5directiveInject@http//localhost:4200/vendor.js:50290:12\n \xc9\xb5\xc9\xb5inject@http//本地主机：4200/vendor.js:36956:57\nfactory@http//localhost:4200/vendor.js:47681:44\n multiResolve@http//localhost:4200/vendor.js:55407:21\n multiProvidersFactoryResolver @http//localhost:4200/vendor.js:55372:12\n getNodeInjectable@http//localhost:4200/vendor.js:39871:44\n searchTokensOnInjector@http//localhost:4200/vendor.js:39807: 16\n getOrCreateInjectable@http://localhost:4200/vendor.js:39729:58\n \xc9\xb5\xc9\xb5directiveInject@http//localhost:4200/vendor.js:50290:12\n FormControlName_Factory@http/ /localhost:4200/vendor.js:74579:400\n getNodeInjectable@http //localhost:4200/vendor.js:39871:44\n searchTokensOnInjector@http //localhost:4200/vendor.js:39807:16\n getOrCreateInjectable@http // localhost:4200/vendor.js:39729:58\n \xc9\xb5\xc9\xb5directiveInject@http //localhost:4200/vendor.js:50290:12\n \xc9\xb5\xc9\ xb5inject@http//localhost:4200/vendor.js:36956:57\nfactory@http//localhost:4200/vendor.js:47681:44\n getNodeInjectable@http//localhost:4200/vendor.js:39871 :44\n searchTokensOnInjector@http//localhost:4200/vendor.js:39807:16\n getOrCreateInjectable@http//localhost:4200/vendor.js:39729:58\n\xc9\xb5\xc9\xb5directiveInject@http //localhost:4200/vendor.js:50290:12\n MatInput_Factory@http //localhost:4200/vendor.js:99837:370\n getNodeInjectable@http //localhost:4200/vendor.js:39871:44\ n instantiateAllDirectives@http//localhost:4200/vendor.js:44362:42\n createDirectivesInstances@http//localhost:4200/vendor.js:43753:29\n \xc9\xb5\xc9\xb5elementStart@http//localhost :4200/vendor.js:50436:34\n \xc9\xb5\xc9\xb5element@http//localhost:4200/vendor.js:50487:19\n SearchComponent_Template@http//localhost:4200/search-search- search-component.js:190:56\n executeTemplate@http//localhost:4200/vendor.js:43726:19\n renderView@http//localhost:4200/vendor.js:43551:28\n renderComponent@http //localhost:4200/vendor.js:44741:15\n renderChildComponents@http //localhost:4200/vendor.js:43412:24\n renderView@http //localhost:4200/vendor.js:43576:34\ n ./node_modules/@angular/core/ ivy_ngcc /fesm5/core.js/ComponentFactory.prototype.create@http//localhost:4200/vendor.js:58804:23\n createContainerRef/R3ViewContainerRef\n

\n

Answer 1

将默认值注入您的 app.module.ts

  providers: [
    MAT_AUTOCOMPLETE_SCROLL_STRATEGY
  ],

对于我们来说，这是 matPaginator 的工具提示导致了类似的错误，该错误已解决

  providers: [
    MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
    MAT_SELECT_SCROLL_STRATEGY_PROVIDER
  ],