Home:ALL Converter>Maximum call stack size exceeded in Angular when importing a pipe to a child module

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

Ask Time:2022-08-05T02:28:03         Author:TTT

Json Formatter

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];
  }
}

Author:TTT,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/73240724/maximum-call-stack-size-exceeded-in-angular-when-importing-a-pipe-to-a-child-mod
Get Off My Lawn :

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.\nSo 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):\n@NgModule({\n declarations: [MyPipe1, MyPipe2],\n exports: [MyPipe1, MyPipe2]\n})\nexport class PipesModule {}\n\nThen the pipes module can be imported in whatever modules may need them. For example here in the app module:\n@NgModule({\n imports: [BrowserModule, PipesModule]\n // Other settings in your app module\n})\nexport class AppModule {}\n\nAnd also here in your child module:\n// Note: BrowserModule can only be imported once, so we will import CommonModule here\n@NgModule({\n imports: [CommonModule, PipesModule]\n // Other settings in your app module\n})\nexport class ChildModule {}\n",
2022-08-04T20:07:37
yy