TypeError: Cannot read property 'navCtrl' of undefined

[a7medo778]

TypeError: Cannot read property 'navCtrl' of undefined
It can’t talk with the functions
I receive the data but its useless, any function I write in branch gives error because it is not talking to the typescript class

Any ideas ?

[ethanneff]

Hello,

Thank you for reaching out.

The example here for Ionic 2/3 shows you how Branch data enters your typescript class. Once the data is inside the class, it is up to you to handle it.

Unfortunately, the navCtrl error is unrelated to Branch as is not used anywhere within the Branch SDK codebase. Your best bet is to look up some typescript, ionic, and angular documentation online to find your solution.

Thanks,

[RekarBotany]

I followed that and when i try to access other functions or navctrl in the branch function
It says property of undefined

[ethanneff]

In the example here for Ionic 2/3, you have to import Branch into the file. Are you doing this in your other functions?

declare var Branch;

[RekarBotany]

And you cannot use the branch data with typescript codes
As angular2 and ionic2 codes are not recognized in branch functions
What is the use if it is only used for alert and console.log?

[RekarBotany]

Yes i import it

[RekarBotany]

And the branch itself is working
It gets the response and i can see it in alert and console.log

But if i want to use another function of ionic 2 and angular 2 it gives error
As branch is a global variable

Fo you have any example to handle the returned data of a deeplink and use it tonroute to other pages

Sent from my Samsung SM-G955F using FastHub

[a7medo778]

@ethanneff hey ethan, we are still hung with our whole project just waiting to solve branch integration, please do share any sample that can guide rekar for a successful integration

thanks

[ethanneff]

Hello again,

I apologize, this is outside the scope of Branch. Once the data is inside the app, it is up to you to do whatever you want with it.

The below example shows how you can pass Branch data into Angular2 and Ionic2 components:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TabsPage } from '../pages/tabs/tabs';
import { AlertController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private alertCtrl: AlertController, private storage: Storage) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      handleBranch();
    });
    platform.resume.subscribe(() => {
      handleBranch();
    });
    // Branch initialization
    const handleBranch = () => {
      // only on devices
      if (!platform.is('cordova')) { return }
      const Branch = window['Branch'];
      Branch.initSession(data => {
        // read deep link data on click
        if (data['+clicked_branch_link']) {
          // save to device
          storage.set('branch', data).then(() => {
            // do something with it
            showAlert();
          });
        }
      });
    }
    // ionic 2 components
    const showAlert = () => {
      // read from device
      storage.get('branch').then((val) => {
        // show alert
        let alert = this.alertCtrl.create({
          title: 'Branch Data',
          subTitle: JSON.stringify(val),
          buttons: ['OK']
        });
        alert.present();
      });
    }
  }
}

I followed these guides for the example above:

• https://ionicframework.com/docs/storage/
• https://ionicframework.com/docs/components/#alert

Best,

[RekarBotany]

ok where should we declare the branch variable

declare var branch is what we did in the app.component.ts

[ethanneff]

It is also possible to use const Branch = window['Branch']; to import the Branch object.