how to make spread syntax work with "export const pipes = _pipes" in NgModule's declarations

70 Views Asked by At

StackBlitz for this problem

I want to create some constant pipes and import them all together in app.module.ts.

It works when I use syntax like export const pipes = [MinValue, MaxValue], but does not work when I use export const pipes = _pipes, it says that No pipe found with name 'MIN_VALUE'.

The problem is that I want to put the logic of the same constant together, if I use the first approach, when there are a lot of constants in the file, I need to jump here and there when adding or removing constants. So, is it possible to make the second approach work?

constant.ts:

import { Pipe, PipeTransform } from '@angular/core';

const _pipes = [];

@Pipe({ name: 'MIN_VALUE' })
export class MinValue implements PipeTransform {
  transform = (v?: any) => 1;
}
_pipes.push(MinValue);

@Pipe({ name: 'MAX_VALUE' })
export class MaxValue implements PipeTransform {
  transform = (v?: any) => 10;
}
_pipes.push(MaxValue);

export const pipes = _pipes; // <- this does not work
// export const pipes = [MinValue, MaxValue]; // <- this works

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

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

import { pipes } from './constant';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [AppComponent, ...pipes], // <- spread syntax here
  bootstrap: [AppComponent],
})
export class AppModule {}
0

There are 0 best solutions below