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：错误：未捕获（按承诺）：NullInjectorError： R3InjectorError（AppModule）[InjectionToken mat-autocomplete-scroll-strategy-> InjectionToken mat-autocomplete-scroll-strategy-> InjectionToken mat-autocomplete-scroll-strategy]：NullInjectorError：没有提供者用于InjectionToken mat-autocomplete-scroll-strategy！ ./node_modules/@angular/core/ivy_ngcc/fesm5/core.js/NullInjector.prototype.get@http//localhost:4200/vendor.js:37066:25“ ./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/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 / vendor.js：50290：12 MatAutocompleteTrigger_Factory @ http // localhost：4200 / vendor.js：76965：788 getNodeInjectable @ http // localhost：4200 / vendor.js：39871：44 searchTokensOnInjector @ http // localhost：4200 / vendor.js：39807：16 getOrCreateInjectable @ http // localhost：4200 / vendor.js：39729：58 ɵɵdirectiveInject@ http // localhost：4200 / vendor.js：50290：12 jectinject @ http // localhost：4200 / vendor.js：36956：57 factory @ http // localhost：4200 / vendor.js：47681：44 multiResolve @ http // localhost：4200 / vendor.js：55407：21 multiProvidersFactoryResolver @ http // localhost：4200 / vendor.js：55372：12 getNodeInjectable @ http // localhost：4200 / vendor.js：39871：44 searchTokensOnInjector @ http // localhost：4200 / vendor.js：39807：16 getOrCreateInjectable @ http // localhost：4200 / vendor.js：39729：58 ɵɵdirectiveInject@ http // localhost：4200 / vendor.js：50290：12 FormControlName_Factory @ http // localhost：4200 / vendor.js：74579：400 getNodeInjectable @ http // localhost：4200 / vendor.js：39871：44 searchTokensOnInjector @ http // localhost：4200 / vendor.js：39807：16 getOrCreateInjectable @ http // localhost：4200 / vendor.js：39729：58 ɵɵdirectiveInject@ http // localhost：4200 / vendor.js：50290：12 jectinject @ http // localhost：4200 / vendor.js：36956：57 factory @ http // localhost：4200 / vendor.js：47681：44 getNodeInjectable @ http // localhost：4200 / vendor.js：39871：44 searchTokensOnInjector @ http // localhost：4200 / vendor.js：39807：16 getOrCreateInjectable @ http // localhost：4200 / vendor.js：39729：58 ɵɵdirectiveInject@ http // localhost：4200 / vendor.js：50290：12 MatInput_Factory @ http // localhost：4200 / vendor.js：99837：370 getNodeInjectable @ http // localhost：4200 / vendor.js：39871：44 InstantiateAllDirectives @ http // localhost：4200 / vendor.js：44362：42 createDirectivesInstances @ http // localhost：4200 / vendor.js：43753：29 lementelementStart @ http // localhost：4200 / vendor.js：50436：34 lementelement @ http // localhost：4200 / vendor.js：50487：19 SearchComponent_Template @ http // localhost：4200 / search-search-search-component.js：190：56 executeTemplate @ http // localhost：4200 / vendor.js：43726：19 renderView @ http // localhost：4200 / vendor.js：43551：28 renderComponent @ http // localhost：4200 / vendor.js：44741：15 renderChildComponents @ http // localhost：4200 / vendor.js：43412：24 renderView @ http // localhost：4200 / vendor.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
  ],

Answer 2

就我而言，我尝试从这里实现芯片自动完成

https://material.angular.io/components/chips/examples

最终出现错误：没有 InjectionToken mat-autocomplete-scroll-strategy 提供程序。

已修复并将其添加到我的 SharedModule（在您的情况下，它可能会在 AppModule 中）

import {ScrollingModule} from '@angular/cdk/scrolling';

Answer 3

您需要将 ReactiveFormsModule 从 @angular/forms 导入您的 NgModule，否则您将收到“NullInjectorError: No provider for InjectionToken mat-autocomplete-scroll-strategy！< /em>”错误。

import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ ], imports: [ // ... ReactiveFormsModule, // <-- ], providers: [ ] })

见https://material.angular.io/components/autocomplete/overview#simple-autocomplete

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

3 个答案: