Error encountered when attempting to retrieve token from firebase for messaging

I am currently working on implementing web push notifications using Firebase. Unfortunately, when attempting to access messaging.getToken(), I encounter an error stating "messaging is undefined." Below is the code snippet I am utilizing:

private messaging = firebase.messaging(); //declaration
this.messaging.requestPermission().then(function () {
 console.log('Notification permission granted.');
 this.messaging.getToken().then(function (currentToken) {
    console.log(currentToken, 'currentToken');
    if (currentToken) {

    } else {
      // Show permission request.
      console.log('No Instance ID token available. Request permission to generate one.');
      // Show permission UI.

    }
  }).catch(function (err) {
    console.log('An error occurred while retrieving token. ', err);

  });
}).catch(function (err) {
  console.log('Unable to get permission to notify.', err);
});

The issue arises with the first log statement displaying "Notification permission granted," followed immediately by executing the catch block displaying "Unable to get permission to notify." Despite adding the firebase-messaging-sw.js file to my root directory and linking it in index.html, as well as testing over HTTPS, the following error persists:

Notification permission granted.
home.component.ts:113 Unable to get permission to notify.
TypeError: Cannot read property 'messaging' of undefined
at home.component.ts:95
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3760)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at zone.js:872
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3751)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

If you have any suggestions or solutions, they would be greatly appreciated. Thank you.

javascriptangulartypescriptfirebasefirebase-cloud-messaging

Answer №1

Consider updating your function to an arrow function.

replace the following:
this.messaging.requestPermission().then(function(){

with this:

this.messaging.requestPermission().then(() => {

 console.log('Notification permission granted.');
 this.messaging.getToken().then((currentToken) => {
 ...

When using a function as a callback, the context of "this" may change. By using an arrow function, you can maintain the main context even within callbacks.

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

Updating lodash when it depends on jshint: A guide to NPM

After successfully passing an audit in npm, I received the following results: Now, I am attempting to update my lodash package but I'm unsure of the correct method to do so. I attempted using npm -i --save lodash, however this created another package ...

javascriptnpmlodash

How can you access the preloaded resolve value in AngularJS ui-router when the $stateChangeSuccess event is triggered?

$stateProvider.state('home', { url: '/', resolve: { person: function() { return 'good' } } Can you help me figure out how to access the value of 'person' in the $stateChangeSuccess callback f ...

javascriptangularjsresolveangular-ui-router

After entering text manually, the textarea.append() function ceases to function properly

I've encountered a puzzling issue with a tiny fiddle I created: https://jsfiddle.net/wn7aLf3o/4/ The scenario is that clicking on 'append' should add an "X" to the textarea. It functions perfectly until I manually input some text in the te ...

javascriptjquery

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss

Using Regex to replace special characters in TypeScript

I need assistance in removing the characters "?" and "/" from my inner HTML string. Can you guide me on how to achieve this using regex? For example, I would like to replace "?" with a space in the following content. "Hello?How are you?<a href="http:/ ...

javascriptregextypescript

Can someone show me how to properly set up nested child routes in Angular 2?

My application structure is organized as shown below . ├── photos ├── posts ├── users │   ├── detail │   │   ├── address │   │   ├── family │   │   ├── information │   │   └ ...

angulartypescriptangular2-routing

Issue with automatic form submission

What is the best way to automatically submit my form once the timer runs out and also when the refresh button is clicked? I have encountered an issue where every time I try to refresh the page, it prompts for user confirmation. If I click cancel, it stay ...

phpjavascript

Encountering an Uncaught TypeError in Reactjs: The property 'groupsData' of null is not readable

While working on a ReactJs component, I encountered an issue with two basic ajax calls to different APIs. Even though I am sure that the URLs are functioning and returning data, I keep getting the following error message: Uncaught TypeError: Cannot read p ...

javascriptajaxreactjs

Adding a task to my database successfully through Postman integration

I'm having trouble implementing the code for my todo app using React. I am encountering an issue with adding a new todo to the database using the handleSubmit function. Oddly enough, it works fine when testing with Postman, but not when trying to inpu ...

javascriptnode.jsreactjsmongodbexpress

Managing the rendering of a functional component using React/Redux

I have encountered an issue with my app where it updates too frequently. Within my reducer, there is a specific action called checkTasks. This action essentially scans through the list of current tasks and moves any expired tasks from the main tasks array ...

javascriptreactjsredux

Issue with initializing MdTable in Vue Material when fetching data

After encountering a null error while trying to fetch remote data to initialize the MdTable component, I shared my issue here. The data is retrieved from a MySQL database as part of a Laravel 5.6 API project. Upon thorough investigation, it seems that the ...

javascriptvue.jsvue-material

Switching the Checkbox Data Binding Feature in Angular

I am looking to send a value based on a toggle switch checkbox selection between Hourly or Salary. How can I incorporate this into the form below? html <div class="row"> <div class="col-sm-6"> <div cl ...

angulartypescript

The error message "Trying to call zmq.zmqVersion as a function, but it's not a function" occured while attempting to import the ZeroMQ

My current project involves creating a react app that can subscribe to an IPC socket using JavaScript code. I chose to use npx create-react-app for this purpose. To handle the subscription, I decided to utilize the npm package zeromq. However, when instal ...

javascriptnode.jsreactjsnpmzeromq

The error message states that the provided callback is not a valid function -

I seem to be encountering an issue with the code snippet below, which is part of a wrapper for the Pipl api: The main function here performs a get request and then retrieves information from the API Any assistance in resolving this error would be greatly ...

javascriptjquerynode.jsnpmcallback

We encountered a surprising character "EOF" in the code. Could it be due to an unescaped "{" in the template? Please use "{{ '{' }}" to properly escape it

I encountered an issue while upgrading my angular 2 app from beta 9 to RC5. The error I received is in my form template. Below is the detailed error: zone.js:461 Unhandled Promise rejection: Template parse errors: Unexpected character "EOF" (D ...

angular

Utilizing Google Web Fonts in Gatsby with Custom Styled Components

While using createGlobalStyle from styled-components for global styling, everything seems to be working fine except for applying Google fonts. I have tried multiple ways but can't seem to get it to work. Here's the code snippet: import { createG ...

javascriptreactjsgatsbystyled-components

Sails encountering CORS preflight error due to cross-origin request

I am new to creating hybrid apps and have been following some tutorials. However, I encountered these errors on my browser console: Refused to load the script 'http://192.168.1.142:35729/livereload.js?snipver=1' due to Content Security Policy di ...

javascriptangularjsnode.jssails.jsionic-framework

What could be causing the discrepancy in alignment between a web application running on Mac and Windows using ReactNative?

We have a web application built with react native. The alignment of the columns in the list is causing issues when running the app on Windows versus Mac, as illustrated in the screenshots. Interestingly, this problem only occurs with this specific list tha ...

typescriptwindowsreact-nativemacosreact-native-flatlist

Transferring user-selected values from JavaScript to a PHP file

When sending values from JavaScript to a PHP file, everything works smoothly when all the values are collected. Step1 functions perfectly as both fields are mandatory. However, in Step2, values are only sent when all the fields are selected. There are co ...

javascriptphpjqueryhtml

Using ajax to submit variables may not function properly

I have a set of data that has been processed using JavaScript and I am looking to save it to a database. I have been attempting to code something with AJAX, but so far, I have had no success... What I require: Two variables (id, name) need to be sent to a ...

javascriptphpajaxvariables