TypeError: Cannot read property 'children' of null when upgrading to Angular 5

Ionic Framework ionic-v3
1

I have been tasked with updating the angular version of an Ionic 3 app from Angular v2 to v5. I am stuck however. When I try to serve or build the app I get a white screen of death with the error message

TypeError: Cannot read property 'children' of null at Content._readDimensions (http://localhost:8100/build/vendor.js:39521:34) at dispatch (http://localhost:8100/build/vendor.js:27290:9) at DomController._flush (http://localhost:8100/build/vendor.js:27263:13) at rafCallback (http://localhost:8100/build/vendor.js:27256:22)

The app is built using the sidemenu template. I have no problems starting a blank sidemenu app. I have also no problems using the exact same package.json file for the node modules.

As far as I’ve been able to track the error it seems to originate in the ionic-angular node module and it seems to be connected to the component.

I use the ion-content module in the menu in my app.html file. This file is however a verbatim copy of the file from the sidemenu template.

I would be happy if you could help me resolve this issue.

2

I have investigated further and the problem seems to lie with the implementation of the NavController. If I remove references to this in pages and services I don’t get the “children of null” error any more.

3

The error has something to do with the Nav element and seems to reside in my app.component.ts file.

This file looks like this:

import {Component, ViewChild} from "@angular/core";
import {AlertController, IonicApp, Nav, Platform, ToastController, App, NavController} from "ionic-angular";
import {SplashScreen} from "@ionic-native/splash-screen";
import {StatusBar} from "@ionic-native/status-bar";
import {SecondPage} from "../pages/secondpage/secondpage";
import {FirstPage} from "../pages/firstpage/firstpage";

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    @ViewChild(Nav) nav: NavController;

    public rootPage: any = SettingsPage;

    private backButtonPressedOnceToExit: boolean = false;

    pages: Array<{ title: string, component: any }>;

    constructor(private toastCtrl: ToastController, platform: Platform, private alertCtrl: AlertController, private ionicApp: IonicApp, private splashScreen: SplashScreen, private statusBar: StatusBar) {
        if (window.localStorage.getItem('key')) {
            this.rootPage = EarningsPage;
        }

        platform.ready().then(() => {
            console.log("platform ready");

            if (platform.is('cordova')) {
                /** not if testing browser */
                statusBar.styleDefault();
                splashScreen.hide();
            }

            this.pages = [
                {title: 'Page 1', component: FirstPage},
                {title: 'Page 2', component: SecondPage},
            ];

        });

        platform.registerBackButtonAction(() => {
            [...]
        });
    }

    showToast() {
        [...]
    }

    openPage(page) {
        this.nav.setRoot(page.component);
    }

}

The app crashes before I get to the platform ready event. The nav variable is undefined when I try to log it out in the constructor. I then get the following error in the console:

ERROR TypeError: parent.registerChildNav is not a function
    at new Nav (nav.js:67)
    at createClass (core.js:12449)
    at createDirectiveInstance (core.js:12284)
    at createViewNodes (core.js:13742)
    at callViewAction (core.js:14176)
    at execComponentViewsAction (core.js:14085)
    at createViewNodes (core.js:13770)
    at createRootView (core.js:13631)
    at callWithDebugContext (core.js:15056)
    at Object.debugCreateRootView [as createRootView] (core.js:14339)
View_MyApp_0 @ MyApp.html:19

Followed by an ERROR CONTEXT and the “Cannot read property ‘children’ of null” error.

4

Your use of Nav looks old. Is it supported by current documentation?

5

Also,

Should be

@ViewChild(Nav) nav: Nav;

If I remember correctly

6

I am getting below error while implementing alert component. please suggest if i missed anything

TypeError: Cannot read property 'children' of null
    at Content._readDimensions (http://localhost:8100/build/vendor.js:31604:34)
    at dispatch (http://localhost:8100/build/vendor.js:19973:9)
    at DomController._flush (http://localhost:8100/build/vendor.js:19946:13)
    at rafCallback (http://localhost:8100/build/vendor.js:19939:22)
7

hello,

show your implementation.

The error means that whatever from whatever.children is not avialable at the time it is called. Maybe whatever is not assigned or it is not assinged in time

Best regards, anna-liebt

8

ok will check for that