Are push notifications supported in Ionic3?

I've been struggling to set up push notifications in my Ionic3 app for the past couple of days, and no matter what I try, it doesn't seem to work due to the current versions I'm using.

Here are my current versions:

rxjs: 5.5.11

Angular: 5.2.11

Typescript: ~2.6.2

Firebase: 5.8.2

@angular/fire: ^5.1.1

angularfire2: ^5.1.1

Some methods I've attempted:

1) AngularFirestore-Firebase Native

Encountering an error 'Object(...) is not a function' due to my rxjs version being outdated. Updating rxjs to version 6 presented TypeScript errors as it required features from ts 2.8 which was unsupported by Ionic. Upgrading Ionic to version 4 would resolve this issue but I'd prefer not to invest time in that now.

2) ionic-push

Still facing the same 'Object(...) is not a function' error.

3) FCM

Weirdly, I can't add FCM to the providers in app.module.ts. TypeScript throws an error stating that FCM cannot be used as a provider.

Any suggestions on how to implement push notifications with my current package versions? Thanks in advance!

angulartypescriptionic3

Answer №1

Encountered a similar issue recently while attempting to use AngularFire + Firebase in Ionic 3. In my scenario, AngularFire wasn't necessary (mostly for storing data in Firebase DB). Instead, I opted to use 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3935283e352c3b772a36283f383b293f1a68746a746f">[email protected]</a>
with @ionic-native/firebase@^4.20.0. This setup allowed me to successfully build and enable notifications on Android (iOS testing pending).

If your aim is solely push notifications, consider utilizing the Firebase plugin (along with the Ionic Native wrapper).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

RXJS - Emit values that are strictly greater than the previous value

I am looking to incorporate a scroll listener with rxjs on my website. Currently, the listener emits every scrollY number. Is there a way to create a scroll listener that only emits the scroll position if the number is higher than before WITHOUT NEEDING TO ...

angularfunctional-programmingrxjsobservable

"Retrieving an element from an array may result in a value of

While going through an array of objects in my Angular component class, I faced a strange issue where the properties kept showing up as undefined. The function responsible for this behavior looks like this: upload(): void { const { fileHandles, related ...

angulartypescript

Unable to activate parameter function until receiving "yes" confirmation from a confirmation service utilizing a Subject observable

Currently, I am working on unit tests for an Angular application using Jasmine and Karma. One of the unit tests involves opening a modal and removing an item from a tree node. Everything goes smoothly until the removeItem() function is called. This functi ...

angulartypescriptunit-testingjasminekarma-jasmine

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

My goal is to maintain the checked items as checked when searching for another item in ion-searchbar. While I have managed to keep the checked items, the checkmark icon does not stay checked. What I aim for is to retain the checked state of all food items ...

javascripthtmlcssangularionic-framework

Angular 5 is encountering an error with a recursive template, specifically a RangeError stating that the maximum call stack

Hey there, I'm currently utilizing Angular recursive template to represent arrays recursively. The code I've been following is provided in this link. My array is dynamic in nature. <ul> <ng-template #recursiveList let-list> ...

angulartypescriptangular-cli

Steps to eliminate the Bearer authorization header in an Angular 4 POST request to an API

Is it possible to exclude the Authorization Bearer in a POST request? The following code was not successful in removing the authorization bearer that is being added by the HTTP interceptors. Error: 403 - Unauthorized Request. The Authorization header is ...

angularangular-materialangular4-formsangular4-httpclient

Angular Object

I am currently working on a small Angular project that focuses on displaying and managing bank accounts using CRUD operations, including transactions. However, I have encountered an issue that is puzzling me. Whenever I click on one of the listed accounts, ...

angularobjecthttpclientcrud

NgOnChanges replaces form control value when user inputs text

In my autocomplete form control component: @Component({ selector: 'app-autocomplete', templateUrl: './app-autocomplete.view.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class AutoCompleteFilterComponent ...

javascriptangularngrxangular-reactive-formsngonchanges

Tips for deactivating the matMenuTrigger when the mat menu does not display any menu items

How can I dynamically disable the mat menu trigger when no items are rendered due to ngIf conditions in the mat-menu? <button mat-button [matMenuTriggerFor]="menu" [disabled]="disableTrigger" > Trigger </button> <mat-menu #menu ...

angularmaterial-design

Changing Observable to Promise in Angular 2

Q) What is the best way to convert an observable into a promise for easy handling with .then(...)? The code snippet below showcases my current method that I am looking to transform into a promise: this._APIService.getAssetTypes().subscribe( assetty ...

typescriptangularpromiseobservable

Tips for managing variables to display or hide in various components using Angular

In this example, there are 3 main components: The first component is A.component.ts: This is the parent component where an HTTP call is made to retrieve a response. const res = this.http.post("https://api.com/abcde", { test: true, }); res.subscribe((r ...

javascriptangulartypescript

Show an Angular Mat Card beneath the Input Field and position it on top of all other div elements

I am designing a signup page and I need to include a material card below the password field with checkboxes for password requirements. The challenge is that when the card appears, it pushes down all other elements such as the sign-up button. I want the ca ...

htmlcssangularangular-material

Developing an Observer and sending updates to my followers

I have a function that returns an Observer for subscription. Inside this function, I make an API call which also returns an Observer to which I subscribe. Once I analyze the data received from this Observer, I need to notify my own Observer subscribers. B ...

angularobservableangular-httpclient

What is the best way to import a TypeScript file in index.js?

I've recently developed an application using the react-express-starter template. I have a "server" directory where the backend is created by nodejs, containing an index.js file: const express = require('express'); const app = express(); c ...

javascriptnode.jstypescript

Tips for identifying and logging out a dormant user from the server side using Angular 2 Meteor

I'm currently diving into Angular 2 Meteor and working on a project that requires logging out the user when they close their browser window. I also need them to be redirected to the login page when they reopen the app. After searching online, I could ...

javascriptangularmeteorangular2-meteor

Is there a way to access the value of the --base-href parameter in my Angular project during the build process?

In my Angular project, I have set up multiple environments for different stages of development, testing, acceptance, and production. Each environment has a specific base URL, which I designate using the --base-href flag during the project build. However, I ...

angulartypescriptangular-cli

Exploring Angular Ag-Grid: Enhancing Row Expansion with a Simple Click

How can I increase the height of a particular row in Angular Ag Grid when clicked? I've edited the code in Stackbiz. Click here to see the edited data This is an example running from ag grid Tutorial Grid Tutorial Example ...

angularag-grid-angular

Which location can I find my 'bundles' folder in Angular 2, NPM, and Visual Studio 2015?

Each guide mentions /node_modules/angular2/bundles/... I'm puzzled why I can't find the 'bundles' directories for Angular or any library obtained from NPM within Visual Studio 2015? Downloaded from NPM "dependencies": { "angular ...

visual-studiovisual-studio-2015npmangular

Validation of form groups in Angular 2 using template-driven approach

I am seeking guidance on how to handle form validation in Angular 2 template-driven forms. I have set up a form and I want to display a warning if any input within a group is invalid. For example, consider the following form structure: <form class="fo ...

javascriptformsvalidationangular

Angular Path Navigation Issue

Below is the route configuration that I am currently using: { path: '', component: FrontEndMainComponent, children: [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { pa ...

angularangular-ui-routerangular2-routingangular-routing