How to use it with angular 2

[tanveerahmaddar]

I wanted to implement this in angular nativescript app but I don't know how to do iy

[vladrmnv]

Very simple! I tried it on Android, iOS is very similar

First thing you have to make sure that NS app is bootstrapped already, so in you your main.ts you can do:

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";
import * as app from 'application';

app.on(app.launchEvent, (args: app.ApplicationEventData) => {
      if (args.android) {
        const pushPlugin = require("nativescript-push-notifications");
        pushPlugin.register({ senderID: '<Your project ID here from FireBase>' }, function (token){
            alert('Device registered successfully : ' + token);
        }, function() { });

        pushPlugin.onMessageReceived(function callback(data) {  
            console.log('Message received');
        });
      }
    })


platformNativeScriptDynamic().bootstrapModule(AppModule);

You can also place pushPluginmethods inside of a service, but I found that it only works if you import it inside of constructor

[hypery2k]

the plugin should handle this, see TobiasHennig/nativescript-toast#8

[Yamilquery]

I got lost. Does this module work with Angular 2?

[devCrossNet]

Yes it does. I got it to work yesterday, what's your issue?

[Roar1827]

Can we get an example usage for Angular2? Thanks.

[Roar1827]

After running tns install and trying to import with:
var pushPlugin = require('nativescript-push-notifications');

Im getting an error:
app/tns_modules/nativescript-push-notifications/push-plugin.js:9:31: JS ERROR ReferenceError: Can't find variable: Push

Any Ideas? Thanks.

[devCrossNet]

@Roar1827 sometimes it helps to uninstall the app from your device, restart the device and run tns prepare, tns build before you run it on your device again (I had this several times during native script development).

here is a short example with Angular 2:
inside a component:

// import plugin
const pushPlugin = require('nativescript-push-notifications');

ngOnInit() {
  this._registerAPN();
}

_registerAPN() {
  const iosSettings = {
    badge: true,
    sound: true,
    alert: true,
    notificationCallbackIOS: (notification) => {
      // update view
    }
  };

  pushPlugin.register(iosSettings,
    (token) => {
      this.user.deviceToken = token;
      this.userService.updateUser(this.user).subscribe(
        () => {
        },
        (err) => {
          alert(err.message);
        },
      );
    },
    () => {
    });
}

edit: for iOS you have to open the iOS project with xCode and enable push notifications (you can find it in the platform folder)

[Roar1827]

thank you very much @devCrossNet ! I still have to figure the details out, but I think my error was coming from not having set xCode to enable push notifications and/or needing to remove the app from the device completely and rebuild.

[alcoceba]

I install the plugin and when I do tns run android the APP crashes after "successfully deployed" messages is printed in the console. I removed node_modules/platform/hooks folders before running the command. No errors neither in the console nor the device screen. I'm completly lost....

Did anyone have the same trouble? Any ideas? Thanks

[alcoceba]

Solved. Just in case, I'd removed the app_resource/Android/app.gradle file, so it worked again when I created a new project.