Uncaught (in promise): TypeError: Cannot read property 'name' of null

Hi all, have searched the forum, but cannot find any answer for ionic 2.

I am getting the error when navigating to a page via push(page.component)

Here is the stacktrace: This must be a bug, as searching my entire “src” directory, I don’t use the word “name” anywhere.

Error: Uncaught (in promise): TypeError: Cannot read property ‘name’ of null
at s (http://localhost:8100/build/polyfills.js:3:8568)
at s (http://localhost:8100/build/polyfills.js:3:8391)
at http://localhost:8100/build/polyfills.js:3:8902
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14051)
at Object.onInvokeTask (\D:\projects\customerApp\node_modules@angular\core\src\zone\ng_zone.js:229:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:13987)
at e.runTask (http://localhost:8100/build/polyfills.js:3:11411)
at i (http://localhost:8100/build/polyfills.js:3:8028)
at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:15204)

Does anyone have an idea of what might be happening here?

Here’s my env:

Ionic Framework: 2.0.0-rc.3
Ionic Native: 2.2.3
Ionic App Scripts: 0.0.45
Angular Core: 2.1.1
Angular Compiler CLI: 2.1.1
Node: 6.9.5
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

This issue happens whether I’m using ionic serve or ionic emulate android.

Best Regards
Adam

How can I go about trying to recreate this?
Did you use a starter project?
What steps did you take?

I used a starter project with side menu

it’s on my logout class:

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';

import { NavController, NavParams } from 'ionic-angular';

import { Login } from '../login/login';

@Component({
	selector: 'page-logout',
	templateUrl: 'logout.html',
	providers: [Storage]
})
export class Logout {


	constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {

		this.storage.clear().then(() => {
			this.navCtrl.setRoot(Login);
		});
	}
}

whenever i navCtrl.push(Logout); to execute this class I get the error. Both using the default openPage function that comes with app.component.ts AND if I have another function which does exactly the same as openPage, but from a button click. This also happens if i setRoot(Logout); as a result of either function

EDIT: This also happens if i call setRoot after my storage.clear() statement and outside it’s then() method.

Hope this helps.
Thanks
Adam

I would take a guess that this is related to the lifeCycle events… http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events

Is there a specific reason you’re declaring Storage in the component’s providers? That seems very unusual.

I’m not sure about this because the only code the the logout class executes is what’s in the constructor. There is no html in the view at all to be rendered and of course no data bindings.

Is this likely to make a difference? I do have it declared in my app’s component providers so I guess it’s just redundant.

I’ve also added catch blocks to both the .then() and the .setRoot(). Also on the page which triggers setRoot(Logout), and they don’t catch anything.

It’s far from redundant in the general case, although I have no idea if it’s related to this particular issue. It determines at what level new instances of the injected object are created. If you put it in the component’s providers, a new instance will be created per component, instead of an app singleton that you are likely expecting.