Onesignal error in ionic 3


#1

hello
i got this error in ionic 3 when put onesignal in my project

Uncaught (in promise): TypeError: Cannot read property 'OneSignal' of undefined

my app.component.ts is

import { Component, ViewChild } from '@angular/core';
import { DetailPage } from '../pages/detail/detail';
import {AlertController} from "ionic-angular";
import { Platform, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { GalleryPage } from '../pages/gallery/gallery';
import { NotifPage } from '../pages/notifaction/notifaction';
import { OffersPage } from '../pages/offers/offers';
import { ServicePage } from '../pages/serv/serv';
import { OneSignal } from '@ionic-native/onesignal';

@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage = HomePage;
  pages: Array<{title: string, component: any}>;
  constructor(public platform: Platform,public statusBar: StatusBar,public splashScreen: SplashScreen,  public alertCtrl: AlertController, public oneSignal: OneSignal) {
    
    platform.ready().then(() => {
 if (splashScreen) {
        setTimeout(() => {
            splashScreen.hide();
        }, 100);
    }      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();

 

this.oneSignal.startInit('e552e072-fc6b-485d-b645-974cd1fcf21a', '884611595411');

this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);

this.oneSignal.handleNotificationReceived().subscribe(() => {
 // do something when notification is received
});

this.oneSignal.handleNotificationOpened().subscribe(() => {
  // do something when a notification is opened
});

this.oneSignal.endInit();


      
    });
  }
  


}

my pakage.json is

{
  "name": "ward44",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/compiler-cli": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@ionic-native/core": "3.7.0",
    "@ionic-native/onesignal": "^3.8.0",
    "@ionic-native/splash-screen": "3.7.0",
    "@ionic-native/status-bar": "3.7.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-cordova": "1.0.0",
    "@ionic/cli-plugin-ionic-angular": "1.0.0",
    "typescript": "~2.2.1"
  },
  "description": "An Ionic project"
}


#2

please help me to solve this problem


#3

I’m seeing a mismatch between you’re core version and the onesignal plugin, maybe that’s what causing your issue?


#4

i upgrade the pakage.json
and enter
npm install
and the problem still exist

{
  "name": "ward44",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/compiler-cli": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@ionic-native/core": "3.8.0",
    "@ionic-native/onesignal": "^3.8.0",
    "@ionic-native/splash-screen": "3.8.0",
    "@ionic-native/status-bar": "3.8.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-cordova": "1.0.0",
    "@ionic/cli-plugin-ionic-angular": "1.0.0",
    "typescript": "~2.2.1"
  },
  "description": "An Ionic project"
}

#5

I think you forgot to import the plugin in your app.module.ts, right?


#6

i imported the plugin but the problem still exist

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Datamembers } from '../providers/datamembers';
import { BirthdayService } from '../providers/BirthdayService';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { GalleryPage } from '../pages/gallery/gallery';
import { NotifPage } from '../pages/notifaction/notifaction';
import { OffersPage } from '../pages/offers/offers';
import {ServicePage} from '../pages/serv/serv';
import { DetailPage } from '../pages/detail/detail';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { OneSignal } from '@ionic-native/onesignal';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
     AboutPage,
    ContactPage,
    GalleryPage,
    NotifPage,
    OffersPage,
    ServicePage,
    DetailPage
  ],
  imports: [
      HttpModule,
      BrowserModule,
    IonicModule.forRoot(MyApp)
    
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
     AboutPage,
    ContactPage,
    GalleryPage,
    NotifPage,
    OffersPage,
    ServicePage,
    DetailPage
  ],
  providers: [ StatusBar,
  OneSignal,
  SplashScreen,{provide: ErrorHandler, useClass: IonicErrorHandler}, Datamembers]
})
export class AppModule {}


#7

Somehow I got this feeling the plugin wasn’t really installed. Could you please remove the ^ sign before the version in your package.json, remove your node_modules folder and reinstall by running npm install in your main directory?


#8

i removed node_modules and ^ and reinstall files by npm install and the problem still exist
:disappointed:


#9

Do you perhaps get any errors when installing the whole bunch?


#10

i dont get any single error

i checked onesignal files and all the package is installed


#11

is there any solution ?


#12

honestly I’m a bit in the dark here. Did you somehow try to override the typing? Did you perhaps declare wildcard types in your typings.d.ts ?

Could you try it with a clean project?


#13

i think one signal version is wrong

"@ionic-native/onesignal": "3.8.0"

can you provide me a older version that maybe work


#14

this is my framework


Ionic Framework: 3.2.1
Ionic App Scripts: 1.3.7
Angular Core: 4.1.0
Angular Compiler CLI: 4.1.0
Node: 6.10.2
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

#15

is there any example to check my steps :worried:


#16

Maybe you could setup a repo so we can reproduce this?


#17

i solved the problem i create new project
thanks for helping