RangeError: Maximum call stack size exceeded <After update to Ionic 3.5.3>

[hartherbert]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.5.3

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Today I updated from Ionic 3.3.0 to Ionic 3.5.3 and followed the ChangeLog-Tutorial (Steps to upgrade). And after that I tried to create a new lazy-loading Component Page called 'ChatPage' via
ionic g page chat

There is nothing unusual about it but when I try to open my ChatPage via this.navCtrl.push('ChatPage'); I get the following error in the Catch-Callback of the navCtrl.push:

[Error] CHAT NAVIGATION ERROR
RangeError: Maximum call stack size exceeded.
forEach
ctor — core.es5.js:393
ParamDecoratorFactory — core.es5.js:426
ParamDecoratorFactory
(anonyme Funktion) — core.es5.js:1847
map
map
_ownParameters — core.es5.js:1641
parameters — core.es5.js:1669
_getDependenciesMetadata — compiler.es5.js:14820
_getTypeMetadata — compiler.es5.js:14745
getProviderMetadata — compiler.es5.js:15021
(anonyme Funktion) — compiler.es5.js:14950
forEach
_getProvidersMetadata — compiler.es5.js:14911
(anonyme Funktion) — compiler.es5.js:14486
forEach
getNgModuleMetadata — compiler.es5.js:14477
getNgModuleSummary — compiler.es5.js:14419
(anonyme Funktion) — compiler.es5.js:14511
.......
.......
.......
getNgModuleMetadata — compiler.es5.js:14506
_loadModules — compiler.es5.js:25630
_compileModuleAndComponents — compiler.es5.js:25589
compileModuleAsync — compiler.es5.js:25551
onInvoke — core.es5.js:4149
run — polyfills.js:3:4459
(anonyme Funktion) — polyfills.js:3:14080
onInvokeTask — core.es5.js:4140
runTask — polyfills.js:3:5154
o — polyfills.js:3:2211
promiseReactionJob
	(anonyme Funktion) (console-via-logger.js:173)
	(anonyme Funktion) (0.js:3026)
	onInvoke (vendor.js:4657)
	run (polyfills.js:3:4459)
	(anonyme Funktion) (polyfills.js:3:14080)
	onInvokeTask (vendor.js:4648)
	runTask (polyfills.js:3:5154)
	o (polyfills.js:3:2211)
	invoke (polyfills.js:3:10987)
	dispatchEvent
	handleTapPolyfill (vendor.js:87394)
	pointerEnd (vendor.js:87280)
	(anonyme Funktion)
	handleTouchEnd (vendor.js:67321)
	(anonyme Funktion)

When I try to build a debug version of my project it works fine to build it and the error above appears in the app. But when I try to run my app with ionic cordova run ios --prod the error above is displayed in the terminal
Expected behavior:
Just navigate to the ChatPage

Steps to reproduce:
Maybe try to upgrade Ionic like I did, maybe the same error appears

Other information:
I saw that this error happend a lot in the last few months and not one solution provided fixed my problem (like: downgrading typscript to 2.3.0 instead of 2.3.4 or giving more memory for node)

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v8.1.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 2.0.0 
    ios-sim    : not installed
    npm        : 5.3.0 

[jgw96]

Hello, thanks for opening an issue with us. Would you be able to post a repo we could use to reproduce this please? Thanks!

@hartherbert Try uninstalling node and fresh install again using npm -g latest, ionic -g and cordova -g, your error will disappear.

[hartherbert]

I used this code to uninstall node on my machine (Mac) and then installed the latest version from .pkg-File on the Node.js website.

sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d

After that I installed ionic and cordova via npm install ionic cordova -g

After that I tried to build my project via ionic cordova run ios --prod and I got the same error message:
Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of date. RangeError: Maximum call stack size exceeded

This way it did not work.. @mokupindia do you know another solution ?

[hartherbert]

Solution:

I implemented lazy loading into my whole app and in the new ChatPage I created, I added the chat.module.ts to lazy load my ChatPage.
My mistake was that I exported my ChatPageModule and not my ChatPage in the module.
The right was is this

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import {TranslateModule} from "@ngx-translate/core";
import {ChatPage} from "./chat";

@NgModule({
  declarations: [ChatPage],
  imports: [
    IonicPageModule.forChild(ChatPage),
    TranslateModule.forChild()],
  exports: [ChatPage]
})
export class ChatPageModule { }

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.