Using Platform.ready() to access ion-tab DOM in Ionic 3/Angular 4

[bennyt2]

First of all, thank you for the book! The example programs, including this one, are fantastic. And let me preface this by saying I realize this is an Ionic 2 book and I'm noting an Ionic 3 issue. However, I noticed you had an Ionic 3 addenum on your site, so I figured this might be useful.

After completing the code under the heading "Rendering the Google Map", I received the following error.

Error: Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null
TypeError: Cannot read property 'firstChild' of null
    at Object._.og (http://maps.google.com/maps/api/js:85:391)
    at new tg (http://maps.google.com/maps/api/js:87:76)
    at ParkMapPage.initializeMap (http://localhost:8100/build/main.js:55948:20)
    at http://localhost:8100/build/main.js:55940:19
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
    at Object.onInvoke (http://localhost:8100/build/main.js:4480:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8911)
    at r.run (http://localhost:8100/build/polyfills.js:3:4140)
    at http://localhost:8100/build/polyfills.js:3:13731
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9655)
    at c (http://localhost:8100/build/polyfills.js:3:13190)
    at http://localhost:8100/build/polyfills.js:3:13762
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9655)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4471:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9576)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:4831)
    at o (http://localhost:8100/build/polyfills.js:3:1891)
    at HTMLAnchorElement.invoke (http://localhost:8100/build/polyfills.js:3:10673)

Ionic Framework: 3.3.0
Ionic App Scripts: 1.3.7
Angular Core: 4.1.2
Angular Compiler CLI: 4.1.2
Node: 6.9.2
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

The error indicates that the DOM element wasn't present, and debugging confirmed that.

I fixed the issue by moving this.initializeMap(); to the ionViewDidLoad() function.

BEFORE:

export class ParkMapPage {
  map: google.maps.Map;
  parks: Array<Park> = [];
  constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform, public parkData: ParkData) {
    this.map = null;
    this.platform.ready().then(() => {
      this.initializeMap();
    })
  }
  ....
}

AFTER:

export class ParkMapPage {
  map: google.maps.Map;
  parks: Array<Park> = [];
  constructor(public navCtrl: NavController, public navParams: NavParams, public parkData: ParkData) {
    this.map = null;
  }

  ionViewDidLoad() {
    this.initializeMap();
  }
}

[steveotto999]

Thanks for the post @bennyt2 !! I also ran into this.

And thanks @chrisgriffith for the excellent book!

(I went to Chris' tutorial at the recent Fluent conference. I recommend it)

[chrisgriffith]

Fixed the repo. Thanks for spotting this. In Ionic 2, the code was fine. Ionic 3 made some improvements that 'broke' the code. Or was I teaching you how to debug your app ;)