Angular 4 错误错误：未捕获（承诺）：RangeError：超出最大调用堆栈大小

Question

1. 我有如下 AppModule -

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   import { Router } from '@angular/router';
   import { AppRoutingModule } from './app-routing.module';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 我的 AppRoutingModule 如下 -

   import { Routes, RouterModule } from '@angular/router';
   
   const routes: Routes = [
           {
           path: '',
           loadChildren: './skeleton/main/main.module#MainModule',
       },
   ];
   
   @NgModule({
       imports: [RouterModule.forRoot(routes)],
       exports: [RouterModule]
   })
   export class AppRoutingModule {}```
   

3. 主模块 -

   import { CommonModule } from '@angular/common';
   import { MainComponent } from './main.component';
   
   @NgModule({
     imports: [
       CommonModule
     ],
     declarations: [MainComponent]
   })
   export class MainModule {}```
   

4. app.component.html 如下所示

   < router-outlet > < /router-outlet >

5. main.component.html -

   < h1 > main works! < /h1 >

当我启动应用程序时，我收到以下错误：-

core.js:1427 ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at MapSubscriber.Subscriber._error (Subscriber.js:130)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at CatchSubscriber.Subscriber._error (Subscriber.js:131)
    at CatchSubscriber.Subscriber.error (Subscriber.js:105)
    at CatchSubscriber.error (catchError.js:108)
    at FirstSubscriber.Subscriber._error (Subscriber.js:131)
    at FirstSubscriber.Subscriber.error (Subscriber.js:105)
    at MergeMapSubscriber.OuterSubscriber.notifyError (OuterSubscriber.js:24)
    at InnerSubscriber._error (InnerSubscriber.js:28)
    at InnerSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:130)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at CatchSubscriber.Subscriber._error (Subscriber.js:131)
    at CatchSubscriber.Subscriber.error (Subscriber.js:105)
    at CatchSubscriber.error (catchError.js:108)
    at FirstSubscriber.Subscriber._error (Subscriber.js:131)
    at FirstSubscriber.Subscriber.error (Subscriber.js:105)
    at MergeMapSubscriber.OuterSubscriber.notifyError (OuterSubscriber.js:24)
    at InnerSubscriber._error (InnerSubscriber.js:28)
    at InnerSubscriber.Subscriber.error (Subscriber.js:105)
    at resolvePromise (zone.js:821)
    at resolvePromise (zone.js:785)
    at eval (zone.js:870)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4744)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:594)
    at <anonymous>
defaultErrorLogger @ core.js:1427
ErrorHandler.handleError @ core.js:1488
next @ core.js:5498
schedulerFn @ core.js:4339
SafeSubscriber.__tryOrUnsub @ Subscriber.js:240
SafeSubscriber.next @ Subscriber.js:187
Subscriber._next @ Subscriber.js:128
Subscriber.next @ Subscriber.js:92
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4319
(anonymous) @ core.js:4775
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4701
onHandleError @ core.js:4775
ZoneDelegate.handleError @ zone.js:392
Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:692
api.microtaskDrainDone @ zone.js:701
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:577
ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:297
ZoneDelegate.scheduleTask @ zone.js:401
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
resolvePromise @ zone.js:815
(anonymous) @ zone.js:736
webpackJsonpCallback @ inline.bundle.js:22
(anonymous) @ main.module.chunk.js:1
core.js:1427 ERROR RangeError: M

由于我的代码中没有循环，为什么会出现此错误？

Answer 1

如果我启用了{preloadingStrategy: PreloadAllModules}，我遇到了同样的问题，甚至在启动时出现问题。

问题是我有一个循环依赖，因为子模块由于某种原因导入了父模块。

为了快速找到问题出在哪里，我使用了 madge

npm i -g madge
madge --circular --extensions ts ./

在我的例子中，我得到了以下输出：

✖ Found 1 circular dependency!

1) app/features/customer/customer.module.ts > app/features/customer/customer-routing.module.ts > app/features/customer/create/create.module.ts

意思是 create.module.ts 是从 customer.module.ts 导入一些东西（反之亦然）。删除无用的导入解决了这个问题。

Answer 2

我在使用 Ionic 时遇到了相同的错误消息，但问题不同（尽管它也可能只发生在 Angular 上）：在名为 chat-list的页面（这是一个 Angular 组件）内> 我放了一个也叫 chat-list 的组件，这意味着它们都有相同的 app-chat-list 选择器，导致无限循环。

Answer 3

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
import {AppointmentComponent} from '../../components/views/appointment/appointment.component';
import {ComponentsModule} from '../../components/components.module';

const routes: Routes = [
  {
    path: '',
    component: HomePage
  }
];

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        ComponentsModule,
        RouterModule.forChild(routes)
    ],
    declarations: [HomePage, AppointmentComponent]
})
export class HomePageModule {}

Answer 4

您需要在 mainModule 内为主模块路由添加一个路由模块。例如。

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {MainComponent} from "./main.component"

const routes: Routes = [
  {
    path: '',
    component: MainComponent
  }
];

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

然后在你的 MainModule 中包含路由模块