Angular 9 ошибка отложенной загрузки компонента: нет поставщика для InjectionToken mat-autocomplete-scroll-стратегии

Question

Я обновил свой проект с Angular 8 до 9 и реорганизовал свой код, чтобы воспользоваться возможностью отложенной загрузки компонентов. Для большинства моих компонентов это прекрасно работает, но у меня есть один, который выдает ошибку, и мне нужна помощь в решении проблемы.

Вот код моего компонента, сопровождаемый ошибкой. Модуль определен в том же файле, что и компонент.

    import { Component, OnInit, OnDestroy, NgModule } from '@angular/core';
    import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { switchMap, debounceTime, tap, filter } from 'rxjs/operators';
    import { MatFormFieldModule, MatInputModule, MatAutocompleteModule, MatButtonModule, MatProgressSpinnerModule, MatIconModule, MatDialogModule } from '@angular/material';

    import { SearchService } from './search.service';
    import { SuggestResult } from './suggest-result';
    import { CommonModule } from '@angular/common';
    import { HttpClientModule } from '@angular/common/http';
    import { SharedModule } from 'src/app/shared/shared.module';

    @Component({
        selector: 'app-search',
        templateUrl: './search.component.html',
        styleUrls: ['./search.component.scss'],
        providers: [ FormBuilder]
    })
    export class SearchComponent implements OnInit, OnDestroy {

    //code removed

    }

    @NgModule({
        imports: [
            CommonModule,
            HttpClientModule,
            FormsModule,
            ReactiveFormsModule,
            MatFormFieldModule,
            MatInputModule,
            MatAutocompleteModule,
            MatButtonModule,
            MatProgressSpinnerModule,
            MatIconModule,
            SharedModule,
            MatDialogModule
        ],
        declarations: [SearchComponent]
    })
    export class SearchModule { }

    <div>
        <div class="form-container">
            <form [formGroup]='resultsForm'>
                <mat-form-field [class.mat-form-field-invalid]="!formFieldValid">
                    <input matInput placeholder="Search term" type="search" [matAutocomplete]="SearchAuto" formControlName='SearchUserInput'>
                </mat-form-field>

                <div *ngIf="!formFieldValid" class="error-msg"> {{ errorMessage }} </div>

                <mat-autocomplete #SearchAuto="matAutocomplete" [displayWith]="getSelectedText"
                    (optionSelected)='onItemSelected($event.option.value)'>
                    <mat-option *ngIf="isLoading" class="is-loading">
                        <mat-spinner mode="indeterminate" diameter="25"></mat-spinner>
                    </mat-option>

                    <ng-container *ngIf="!isLoading">
                        <mat-option *ngFor="let result of filteredResults" [value]="result">
                            <span>{{ result.name }}</span>
                        </mat-option>
                    </ng-container>
                </mat-autocomplete>
           </form>
            <mat-icon>search</mat-icon>
            <button mat-button *ngIf="isNotEmpty()" matSuffix mat-icon-button aria-label="Clear" (click)="clearSearch()">
                <mat-icon>close</mat-icon>
            </button>
        </div>
    </div>

Ошибка:

null: Ошибка: Uncaught (в обещании): NullInjectorError: R3InjectorError ( AppModule) [InjectionToken mat-autocomplete-scroll-стратегии -> InjectionToken mat-autocomplete-scroll-стратегии -> InjectionToken mat-autocomplete-scroll-стратегии]: NullInjectorError: Нет поставщика для InjectionToken mat-autocomplete-scroll-стратегии! ./node_modules/@angular/core/ivy_ngcc/fesm5/core.js/NullInjector.prototype.get@http//localhost:4200/vendor.js:37066:25 "./node_modules/ @ angular / core / ivy_ng cc / fesm5 / core.js / R3Injector.prototype. get@http//localhost: 4200 / vendor. js: 47422: 33 ./node_modules/@angular/core/ ivy_ng cc / fesm5 / core.js / R3Injector.prototype. get@http//localhost: 4200 / vendor. js: 47422: 33 ./node_modules/@angular/core/ivy_ngcc / fesm5 / core.js / R3Injector.prototype. get@http//localhost: 4200 / vendor. js: 47422: 33 ./node_modules/@angular/core/ivy_ngcc /fesm5/core.js/NgModuleRef$1.prototype.get@http//localhost:4200/vendor.js:60382:33 get@http//localhost: 4200 / vendor. js: 58703: 35 getOrCreateInjectable@http//localhost: 4200 / vendor. js: 39763: 39 ɵɵdirectiveInject@http//localhost: 4200 / поставщик. js: 50290: 12 MatAutocompleteTrigger_Factory@http//localhost: 4200 / поставщик. js: 76965: 788 getNodeInjectable@http//localhost: 4200 / поставщик. js: 39871 : 44 searchTokensOnInjector@http//localhost: 4200 / поставщик. js: 39807: 16 getOrCreateInjectable@http//localhost: 4200 / поставщик. js: 39729: 58 ɵɵdirectiveInject@http//localhost: 4200 / поставщик. js: 50290: 12 ɵɵinject@http//localhost : 4200 / поставщик. js: 36956: 57 factory@http//localhost: 4200 / поставщик. js: 47681: 44 multiResolve@http//localhost: 4200 / поставщик. * 108 9 *: 55407: 21 multiProvidersFactoryResolver@http//localhost: 4200 / поставщик. js: 55372: 12 getNodeInjectable@http//localhost: 4200 / поставщик. js: 39871: 44 searchTokensOnInjector@http//localhost: 4200 / поставщик. js: 39807: 16 getOrCreateInjectable@http//localhost: 4200 / поставщик. js: 39729: 58 ɵɵdirectiveInject@http//localhost: 4200 / поставщик. js: 50290: 12 FormControlName_Factory@http//localhost: 4200 / поставщик. js: 74579: 400 getNodeInjectable@http//localhost: 4200 / поставщик. js: 39871: 44 searchTokensOnInjector@http//localhost: 4200 / поставщик. js: 39807: 16 getOrCreateInjectable@http//localhost: 4200 / поставщик. js: 39729: 58 ɵɵdirectiveInject@http//localhost: 4200 / поставщик. js: 50290: 12 ɵɵinject@http//localhost: 4200 / поставщик. js: 36956: 57 factory@http//localhost: 4200 / поставщик. js: 47681: 44 getNodeInjectable@http//localhost: 4200 / поставщик. js: 39871: 44 searchTokensOnInjector@http//localhost: 4200 / поставщик. js: 39807: 16 getOrCreateInjectable@http//localhost: 4200 / поставщик. js: 39729: 58 ɵɵdirectiveInject@http//localhost: 4200 / поставщик. js: 50290: 12 MatInput_Factory@http//localhost: 4200 / поставщик. js: 99837: 370 getNodeInjectable@http//localhost: 4200 / поставщик. js: 39871: 44 instantiateAllDirectives@http//localhost: 4200 / поставщик. js: 44362: 42 createDirectivesInstances@http//localhost: 4200 / поставщик. js: 43753: 29 ɵɵelementStart@http//localhost: 4200 / vendor. js: 50436: 34 ɵɵelement@http//localhost: 4200 / vendor. js: 50487: 19 SearchComponent_Template@http//localhost: 4200 / search-search-search-component. js: 190: 56 executeTemplate@http//localhost: 4200 / поставщик. js: 43726: 19 renderView@http//localhost: 4200 / поставщик. js: 43551: 28 renderComponent@http//localhost: 4200 / поставщик. js: 44741 : 15 renderChildComponents@http//localhost: 4200 / поставщик. js: 43412: 24 renderView@http//localhost: 4200 / поставщик. js: 43576: 34 ./node_modules/@angular/core/ivy_ngcc/fesm5/core.js/ComponentFactory.prototype.create@http//localhost:4200/vendor.js:58804 : 23 createContainerRef / R3ViewContainerRef

Answer 1

Введите значения по умолчанию в ваш app.module.ts

  providers: [
    MAT_AUTOCOMPLETE_SCROLL_STRATEGY
  ],

Для нас это были подсказки matPaginator, вызывающие похожую ошибку, которая была устранена с помощью

  providers: [
    MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
    MAT_SELECT_SCROLL_STRATEGY_PROVIDER
  ],