Question

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

2017-12-28

19055

angular routes

我有如下的 AppModule -

从 '@angular/platform-browser' 导入 { BrowserModule };
从 '@angular/core' 导入 { NgModule };
从 './app.component' 导入 { AppComponent };
从 '@angular/router' 导入 { Router };
从 './app-routing.module' 导入 { AppRoutingModule };

@NgModule({
声明：[
AppComponent
],
导入：[
BrowserModule,AppRoutingModule
],
提供程序：[],
引导程序：[AppComponent]
})
导出类 AppModule { }

我的 AppRoutingModule 如下所示 -

从 '@angular/router' 导入 { Routes, RouterModule };

const routes: Routes = [
{
path: '',
loadChildren: './skeleton/main/main.module#MainModule',
},
];

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

MainModule -

从 '@angular/common' 导入 { CommonModule };
从 './main.component' 导入 { MainComponent };

@NgModule({
imports: [
CommonModule
],
declareds: [MainComponent]
})
export class MainModule {}```

app.component.html 如下所示

< router-outlet > < /router-outlet >
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

您需要在 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 中

Answer 2

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 3

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