4

我将我的项目从 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 ɵɵinject@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 ɵɵinject@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 ɵɵ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/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/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 ɵɵ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/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/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 ɵɵ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/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/42 createDirectivesInstances@http//localhost:4200/vendor.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/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/42 createDirectivesInstances@http//localhost:4200/vendor.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/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/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/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

4

4 回答 4

2

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

  providers: [
    MAT_AUTOCOMPLETE_SCROLL_STRATEGY
  ],


对我们来说，是 matPaginator 的工具提示导致了类似的错误，该错误已通过以下方式解决

  providers: [
    MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
    MAT_SELECT_SCROLL_STRATEGY_PROVIDER
  ],
于 2020-04-19T05:51:49.697 回答
1

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

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

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

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

import {ScrollingModule} from '@angular/cdk/scrolling';
于 2021-02-25T08:58:29.870 回答
0

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

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    declarations: [
    ],
    imports: [
        // ...
        ReactiveFormsModule, // <--
    ],
    providers: [
    ]
})

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

于 2021-05-10T09:16:27.673 回答
0

在组件级别添加了提供程序

providers: [
 {
  provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
  useValue: MAT_SELECT_SCROLL_STRATEGY_PROVIDER,
 },
],

这为我解决了这个问题

于 2021-10-29T10:34:01.693 回答