Question

我有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 { }

我的AppRoutingModule如下所示 -

从'@ angular / core'导入{NgModule}; 从'@ angular / router'导入{Routes，RouterModule};

const routes：Routes = [ { 路径：''， loadChildren：'。/ skull / main / main.module #MainModule'， }， ];

@NgModule（{ 导入：[RouterModule.forRoot（routes）]，导出：[RouterModule] }）导出类AppRoutingModule {}
MainModule -

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

@NgModule（{ 进口：[ CommonModule ] 声明：[MainComponent] }）导出类MainModule {}
app.component.html如下所示

＆LT; router-outlet＆gt; ＆LT; / router-outlet＆gt;
main.component.html -

＆LT; h1＆gt;主要作品！＆LT; / h1＆gt;

当我开始申请时，我收到了以下错误 -

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中发生）：在称为 聊天列表 我放置了一个也称为 聊天列表 的组件，这意味着它们都具有相同的 app-chat-list > 选择器，它导致了无限循环。

Answer 4

我遇到了同样的问题，如果启用了{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中导入内容（反之）。删除无用的导入可解决此问题。

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

4 个答案: