Maximum call stack size exceeded in Angular when importing a pipe to a child module-CodePudding

I created a simple pipe for a string operation and I think it would make sense that it would be available everywhere in the application.

It is located in src/pipes folder.

To keep code anonymised I renamed stuff and the pipe is now called SomePipe.

It is declared in app.module, then it is imported in child.module.

But it causes "Error: Maximum call stack size exceeded". I join the code of app-routing.module as well as I feel like it may have to do with this... (its current state where it is lazy-loading child.module is the result of another question I posted here because otherwise one of the child components of child.module which used a different route would re-direct to the 404 page IF the ** route was set in app-routing.module, but would work fine it the ** route was not set. This was the other question: Given component works but redirects to 404 page when "**" route is configured Someone also suggested in it that I could create a distinct module for the ** route and the 404 page, but I have tried this yet and I'm not sure if it would have anything to do with the current issue.)

app.module.ts

(...)

import { SomePipe } from './pipes/some.pipe';

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent,
    SomePipe
  ],
  imports: [
    BrowserModule,
   AppRoutingModule,
   ChildModule,
   HttpClientModule
],
  providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

child.module.ts

(...)
import { SomePipe } from './pipes/some.pipe';

const routes: Routes = [
    { path: 'stuff/:id', component: StuffComponent },
    { path: '', component: MainThingsComponent }
];

@NgModule({
  declarations: [
    MainThingsChildComponent1,
    MainThingsChildComponent2,
    StuffComponent,
    MainThingsComponent
  ],
  imports: [
      CommonModule,
      FormsModule,
      ReactiveFormsModule,
      RouterModule.forChild(routes),
      SomePipe
    ],
    providers: [
        SomeService
    ]
})
export class ChildModule {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
    {
        path: '',
        loadChildren: () =>
            import('./things/child.module').then((m) => m.ChildModule)
    },
    { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

some.pipe.ts

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

@Pipe({
  name: 'somePipe'
})
export class SomePipe implements PipeTransform {

  transform(number : number): string {
      (...)
      return [some string];
  }
}

CodePudding user response：

If you are going to share a component/directive/pipe/etc. between multiple modules, it is best to place it within a shared module. This will help avoid the error that you are receiving.

So what we can do is place all your pipes in a PipesModule (Note the exports property, this is what exposes module items to other modules):

@NgModule({
  declarations: [MyPipe1, MyPipe2],
  exports: [MyPipe1, MyPipe2]
})
export class PipesModule {}

Then the pipes module can be imported in whatever modules may need them. For example here in the app module:

@NgModule({
  imports: [BrowserModule, PipesModule]
  // Other settings in your app module
})
export class AppModule {}

And also here in your child module:

// Note: BrowserModule can only be imported once, so we will import CommonModule here
@NgModule({
  imports: [CommonModule, PipesModule]
  // Other settings in your app module
})
export class ChildModule {}

CodePudding user response：

Move SomePipe from imports to declarations array