错误：NG0302：在“CustomPipeComponent”组件中找不到管道“排序”

Question

我在使用 Jasmine 进行测试时遇到了这个错误。我创建了一个自定义管道，它根据所选参数对列表进行排序。

据我所知，我已经导入了所有内容。此外，代码正在正确执行，没有任何问题。然而，我在使用 Jasmine 时遇到了这个问题。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import {FormsModule } from '@angular/forms';
import { SortPipe } from './sort.pipe';
import { CustomPipeComponent } from './custom-pipe/custom-pipe.component';
import { CustpipeComponent } from './custpipe/custpipe.component';
import { RideFilterPipePipe } from './ride-filter-pipe.pipe';
import { ReactFormComponent } from './react-form/react-form.component';
import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-form.component';
import { EmailValidator } from './template-driven-form/emailValidator';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipeComponent,
    SortPipe,
    CustpipeComponent,
    RideFilterPipePipe,
    ReactFormComponent,
    TemplateDrivenFormComponent,
    EmailValidator
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule      
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

custom-pipe.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-pipe',
  templateUrl: './custom-pipe.component.html',
  styleUrls: ['./custom-pipe.component.css']
})
export class CustomPipeComponent implements OnInit {
  sortoption: string = '';
  productsList: any = [
    { productName: 'Samsung J7', price: 18000 },
    { productName: 'Apple iPhone 6S', price: 60000 },
    { productName: 'Lenovo K5 Note', price: 10000 },
    { productName: 'Nokia 6', price: 15000 },
    { productName: 'Vivo V5 Plus', price: 26000 },
  ];
  constructor() { }

  ngOnInit(): void {
  }

}

custom-pipe.component.html

<h2>Sorting Products list using custom pipe</h2>
Sort the list based on
<select [(ngModel)]="sortoption">
  <option value="prodName">Product Name</option>
  <option value="price">Price</option>
</select>
<br /><br />
<table border="1">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let products of productsList | sort: sortoption " >
      <td>{{ products.productName }}</td>
      <td>{{ products.price }}</td>
    </tr>
  </tbody>
</table>

sort.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {
  transform(value: any[], args?: any): any[] {
    if (args === 'prodName') {
      return value.sort((a: any, b: any) => {
        if (a.productName < b.productName) {
          return -1;
        } else if (a.productName > b.productName) {
          return 1;
        } else {
          return 0;
        }
      });
    } else if (args === 'price') {
      return value.sort((a: any, b: any) => {
        if (a.price < b.price) {
          return -1;
        } else if (a.price > b.price) {
          return 1;
        } else {
          return 0;
        }
      });
    }
    return value;
  }
}

customer-pipe.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomPipeComponent } from './custom-pipe.component';

describe('CustomPipeComponent', () => {
  let component: CustomPipeComponent;
  let fixture: ComponentFixture<CustomPipeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CustomPipeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

sort.pipe.spec.ts

import { SortPipe } from './sort.pipe';

describe('SortPipe', () => {
  it('create an instance', () => {
    const pipe = new SortPipe();
    expect(pipe).toBeTruthy();
  });
});

Answer 1

修复： 进行以下更改：

1. 在app.module.ts 中添加SortPipe 在providers。 （如果管道依赖于服务）
2. 在customer-pipe.component.spec.ts 添加SortPipe 在providers。

如下所示

app.module.ts

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import {FormsModule } from '@angular/forms';
import { SortPipe } from './sort.pipe';
import { CustomPipeComponent } from './custom-pipe/custom-pipe.component';
import { CustpipeComponent } from './custpipe/custpipe.component';
import { RideFilterPipePipe } from './ride-filter-pipe.pipe';
import { ReactFormComponent } from './react-form/react-form.component';
import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-form.component';
import { EmailValidator } from './template-driven-form/emailValidator';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipeComponent,
    SortPipe,
    CustpipeComponent,
    RideFilterPipePipe,
    ReactFormComponent,
    TemplateDrivenFormComponent,
    EmailValidator
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule      
  ],
  providers: [SortPipe], // Added SortPipe here (Optional)
  bootstrap: [AppComponent]
})
export class AppModule { }

customer-pipe.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomPipeComponent } from './custom-pipe.component';

describe('CustomPipeComponent', () => {
  let component: CustomPipeComponent;
  let fixture: ComponentFixture<CustomPipeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent, SortPipe ], // SortPipe is present already
      providers: [SortPipe] // Added providers and SortPipe included
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CustomPipeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 2

您需要在TestingModule的声明中添加SortPipe

describe('CustomPipeComponent', () => {
  ...

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent, SortPipe ] // <-- here
    })
    .compileComponents();
  });

  ...
});

干杯