将管道导入子模块时，Angular中超过了最大调用堆栈大小

Question

我为字符串操作创建了一个简单的管道，我认为它在应用程序中的任何地方都可用是有意义的。

它位于src/pipes文件夹中。

为了保持代码的匿名性，我将其重命名，管道现在被称为SomePipe。

它在app.module中声明，然后在child.module中导入。

但它导致了"；错误：超过了最大调用堆栈大小；。我也加入了app-routing.module的代码，我觉得这可能与此有关。。。(它当前的延迟加载child.module的状态是我在这里发布的另一个问题的结果，因为否则child.module的一个使用不同路由的子组件将重定向到404页面IF**路由是在app-routing.module中设置的，但如果没有设置**路由，则会正常工作404页**"路由已配置有人还建议我可以为**路由和404页面创建一个不同的模块，但我已经尝试过了，我不确定这是否与当前问题有关。(

应用程序模块.ts

(...)
import { SomePipe } from './pipes/some.pipe';
@NgModule({
declarations: [
AppComponent,
NotFoundComponent,
SomePipe
],
imports: [
BrowserModule,
AppRoutingModule,
ChildModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

子模块.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 {}

应用程序路由模块.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 { }

一些管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'somePipe'
})
export class SomePipe implements PipeTransform {
transform(number : number): string {
(...)
return [some string];
}
}

Answer 1

如果要共享组件/指令/管道等。在多个模块之间，最好将其放置在一个共享模块中。这将有助于避免您收到的错误。

因此，我们可以将所有管道放置在PipesModule中(注意exports属性，这是向其他模块公开模块项的内容(：

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

然后，管道模块可以导入到任何可能需要它们的模块中。例如，在应用程序模块中：

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

在您的子模块中：

// 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 {}

Answer 2

将SomePipe从导入移动到声明数组