Error getting data from firebase using changes.map in ionic 3 - firebase

I am trying to get data from firebase based on the login user ID but i am having error when using changes.map. Error show in vscode is "property 'map' does not exist on type 'unknown'".
Below is how i am getting the data:
-----------------shopping-list.ts:-----------------
userId: string;
private shoppingListRef: any;
constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth){
this.afAuth.authState.subscribe(data => {
if(data && data.email && data.uid){
this.userId = data.uid;
this.shoppingListRef = this.db.list<Item>(`shopping-list/${data.uid}`);
}
})
}
getShoppingList(){
return this.shoppingListRef;
}
---------------home.ts:----------------------
shoppingList$: Observable<Item[]>;
userId: string;
profileData: Observable<Profile>;
constructor(public navCtrl: NavController, private shopping: shoppingListService,
public db: AngularFireDatabase, private toast: ToastService,
private afAuth: AngularFireAuth, private account: userAccountService) {}
ionViewWillLoad(){
this.afAuth.authState.subscribe(data => {
if(data && data.email && data.uid){
this.profileData = this.db.object<Profile>(`profile/${data.uid}`).valueChanges();
this.userId = data.uid;
this.getItemList();
}
else{
this.navCtrl.setRoot('LoginPage');
}
})
}
getItemList(){
try{
this.shoppingList$ = this.shopping
.getShoppingList() //this reruns the DB list
.snapshotChanges() //this gives the keys and value pairs
.pipe(map(
changes => {
**return changes.map(c => ({//this changes.map is where the error is showing**
key: c.payload.key,
...c.payload.val()
}));
}
));
}
catch(e){
console.error(e);
}
}
----home.html------
This is how i display the records
<ion-item-sliding *ngFor="let item of shoppingList$ | async; let i=index" (click)="toggleAccordion(i)" [ngClass]="{active: isAccordionShown(i)}" >
------Below is my package.jason:--------
{
"name": "shoppingList",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "5.2.11",
"#angular/forms": "5.2.11",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#ionic-native/core": "4.20.0",
"#ionic-native/network": "^4.20.0",
"#ionic-native/splash-screen": "4.20.0",
"#ionic-native/status-bar": "4.20.0",
"#ionic/storage": "2.2.0",
"angularfire2": "^5.4.2",
"cordova-plugin-network-information": "2.0.2",
"cordova-res": "^0.15.1",
"firebase": "^7.15.0",
"ionic-angular": "3.9.9",
"ionicons": "3.0.0",
"native-run": "^1.0.0",
"promise-polyfill": "^8.1.3",
"rxjs": "6.0.0",
"rxjs-compat": "6.2.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"#ionic/app-scripts": "3.2.4",
"#ionic/lab": "3.1.7",
"cordova-plugin-device": "2.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^4.0.0",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"cordova-plugin-whitelist": "1.3.3",
"typescript": "^2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-network-information": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
This error Started after i upgraded typescript to the latest using npm i typscript#latest and it updated to version "^3.9.7".
-----Things i have tried-------
Downgrade the typescript
Upgrade rxjs and rxjs-compat to 6.5.5,6.3.0,6.2.0
Created a new project
Delete node_modules, package-lock.jason, and did npm install
I really need help beause i have been on this for days with no solution. Thanks to you all in advance

I found the solution to my problem.
I assigned a type of any to shoppingListRef instead of type of AngularFireList
it was initially:
private shoppingListRef: any;
updated it to:
import { AngularFireDatabase, AngularFireList } from "angularfire2/database";
private shoppingListRef: AngularFireList<Item>;
The above changes solved the problem

Related

Get refreshToken react-native firebase and #react-native-google-signin/google-signin

I need to get my accessToken and my refreshToken when I authenticate with fireabse. I have read a lot of the documentation and I can't understand how to get the refreshToken.
I get the accessToken from the GoogleSignIn.getTokens() method.
But I can't get the refreshToken from any method or function that these libraries provide me.
I need accessToken and refreshToken to send it to my backend. In other applications I am already receiving it, through other methods, but what would be the problem here? is the library wrong? I am not understanding the documentation? Why can't I really understand where to get it from or if the idToken updates itself or maybe the refreshToken is not sent anymore?
my code =>
import { GoogleSignin } from '#react-native-google-signin/google-signin';
import auth from '#react-native-firebase/auth';
GoogleSignin.configure({
webClientId:
'xxxxxxxxxxxxxxxxxxxxx',
});
const onGoogleButtonPress = async () => {
// Get the users ID token
const { idToken } = await GoogleSignin.signIn();
// Create a Google credential with the token
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
// Sign-in the user with the credential
return auth().signInWithCredential(googleCredential);
};
export { onGoogleButtonPress };
React Native Info =>
react: 18.1.0 => 18.1.0
react-native: 0.70.6 => 0.70.6
Package.json ->
{
"name": "asset_management_mobile",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#invertase/react-native-apple-authentication": "^2.2.2",
"#react-native-firebase/app": "^15.4.0",
"#react-native-firebase/auth": "^15.4.0",
"#react-native-google-signin/google-signin": "^8.0.0",
"#react-native-masked-view/masked-view": "0.2.0",
"#react-navigation/bottom-tabs": "^6.5.2",
"#react-navigation/native": "^6.0.12",
"#react-navigation/stack": "^6.2.3",
"#types/react-native-background-timer": "^2.0.0",
"convert-string": "^0.1.0",
"depcheck": "^1.4.3",
"deprecated-react-native-prop-types": "^2.3.0",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-android-open-settings": "^1.3.0",
"react-native-background-timer": "^2.4.1",
"react-native-ble-manager": "^8.4.3",
"react-native-bluetooth-state-manager": "^1.3.4",
"react-native-gesture-handler": "^2.6.0",
"react-native-gradle-plugin": "^0.70.2",
"react-native-linear-gradient": "^2.6.2",
"react-native-permissions": "^3.6.1",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.3",
"react-native-screens": "^3.17.0",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^13.1.0",
"react-native-swiper": "^1.6.0",
"react-native-vision-camera": "^2.15.2",
"vision-camera-code-scanner": "^0.2.0"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/runtime": "^7.14.6",
"#react-native-community/eslint-config": "^3.0.0",
"#types/convert-string": "^0.1.1",
"#types/jest": "^29.0.0",
"#types/react": "^18.0.18",
"#types/react-native": "^0.69.6",
"#types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.0.1",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^8.23.0",
"jest": "^29.0.1",
"metro-react-native-babel-preset": "^0.72.1",
"react-native-svg-transformer": "^1.0.0",
"react-native-typescript-transformer": "^1.2.13",
"react-test-renderer": "^18.2.0",
"ts-jest": "^28.0.8",
"typescript": "^4.3.5"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/node_modules/"
],
"cacheDirectory": ".jest/cache"
}
}
I need your help!! Thanks!

Firebase Deploy Unexpected token

I am getting the error Parsing error: Unexpected token => when I try to deploy my Vue JS application to firebase. The application runs fine on my local machine but I am not able to deploy to firebase.
Here is the full error
=== Deploying to 'mmmmnl-d5ddc'...
i deploying storage, firestore, functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run lint
> lint
> eslint .
/Users/KingdomMac/Downloads/ermnl_delivery/ermnl-dashboard/functions/index.js
22:71 error Parsing error: Unexpected token =>
✖ 1 problem (1 error, 0 warnings)
Error: functions predeploy error: Command terminated with non-zero exit code1
I have added ecmaVersion: 8 to parserOptions. I have changed it to 6, I have also changed it to 2017 as suggested by some other answers.
Here is my .eslintrc.js file
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "#vue/prettier"],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
},
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2017
},
'extends': [
'plugin:vue/essential',
'#vue/prettier',
'#vue/standard'
]
};
Here is my package.json file
{
"name": "vue-white-dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^2.0.2",
"axios": "^0.21.1",
"chart.js": "^2.8.0",
"core-js": "^2.6.5",
"firebase": "^8.6.8",
"node-sass": "^6.0.1",
"vue": "^2.6.10",
"vue-chartjs": "^3.4.2",
"vue-click-outside": "^1.0.7",
"vue-clickaway": "^2.2.2",
"vue-github-buttons": "^3.1.0",
"vue-i18n": "^8.14.1",
"vue-router": "^3.0.3",
"vue-social-sharing": "^2.4.6",
"vue2-transitions": "^0.3.0",
"vuetify": "^2.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-service": "^4.5.15",
"#vue/eslint-config-prettier": "^5.0.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^8.2.0",
"eslint-config-eslint": "^7.0.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.14.0",
"prettier": "^1.18.2",
"sass": "~1.32",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.4.1",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.7.0"
}
}
None of the the other resources I have read points out the problem to be from their code. But I am just adding functions/index.js here incase the problem is from the that file.
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
const db = admin.firestore();
exports.addUserRole = functions.auth.user().onCreate(async (authUser) => {
if (authUser.email) {
const customClaims = {
admin: true,
};
try {
let _ = await admin.auth().setCustomUserClaims(authUser.uid, customClaims);
return db.collection("roles").doc(authUser.uid).set({
email: authUser.email,
role: customClaims,
});
} catch (error) {
console.log(error);
}
}
});
exports.setUserRole = functions.https.onCall(async (data, context) => {
if (!context.auth.token.admin) return
try {
let _ = await admin.auth().setCustomUserClaims(data.uid, data.role)
return db.collection("roles").doc(data.uid).update({
role: data.role
})
} catch (error) {
console.log(error)
}
});
As requested in the comments, I have added my firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": "functions"
},
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

Ngrx store getting error as Property 'ofType' does not exist on type

I am trying to develop a application using ngrx/store getting error. unable to figureout the issue. any one help me?
here is my errors:
ERROR in src/app/store/effects/authentication.effects.ts(25,7): error TS2339: Property 'ofType' does not exist on type 'Actions<Action>'.
src/app/store/effects/authentication.effects.ts(29,59): error TS2339: Property 'email' does not exist on type '{}'.
src/app/store/effects/authentication.effects.ts(29,74): error TS2339: Property 'password' does not exist on type '{}'.
src/app/store/effects/authentication.effects.ts(33,73): error TS2339: Property 'email' does not exist on type '{}'.
typescript file :
import { Injectable } from '#angular/core';
import { Action } from '#ngrx/store';
import { Router } from '#angular/router';
import { Actions, Effect, ofType } from '#ngrx/effects';
import { Observable, of } from 'rxjs';
import { map, switchMap, catchError, tap } from 'rxjs/operators';
import { AuthenticationService } from './../../service/authentication.service';
import { AuthenticationActionTypes,
Login, LoginSuccess,
LoginFailure, Logout } from './../actions/authentication.actions';
#Injectable({
providedIn: 'root'
})
export class AuthenticationEffects {
constructor(
private actions:Actions,
private authenticationService:AuthenticationService,
private router:Router) {}
#Effect()
Login: Observable<any> = this.actions
.ofType(AuthenticationActionTypes.LOGIN)
.pipe(
map((action: Login) => action.payload),
switchMap(payload => {
return this.authenticationService.login(payload.email, payload.password)
.pipe(
map((user) => {
console.log(user);
return new LoginSuccess({token: user.token, email: payload.email});
}),
catchError((error) => {
return of(new LoginFailure({ error: error }));
}));
}));
#Effect({ dispatch: false })
LoginSuccess: Observable<any> = this.actions.pipe(
ofType(AuthenticationActionTypes.LOGIN_SUCCESS),
tap((user) => {
localStorage.setItem('token', user.payload.token);
localStorage.setItem('email', user.payload.email);
this.router.navigateByUrl('/');
})
);
#Effect({ dispatch: false })
LoginFailure: Observable<any> = this.actions.pipe(
ofType(AuthenticationActionTypes.LOGIN_FAILURE)
);
#Effect({ dispatch: false })
public Logout: Observable<any> = this.actions.pipe(
ofType(AuthenticationActionTypes.LOGOUT),
tap((user) => {
localStorage.removeItem('token');
localStorage.removeItem('email');
this.router.navigateByUrl('/login');
})
);
}
JSON File :
{
"name": "authentication",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#ngrx/core": "^1.2.0",
"#ngrx/effects": "^7.0.0",
"#ngrx/store": "^7.0.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.12.0",
"#angular/cli": "~7.2.2",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/node": "~8.9.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
any one help me here.... thanks in advance.
within your first effect you didn't put ofType into pipe:
so, instead of:
Login: Observable<any> = this.actions
.ofType(AuthenticationActionTypes.LOGIN)
.pipe(
do:
Login: Observable<any> = this.actions.pipe(
ofType(AuthenticationActionTypes.LOGIN)

Change DATE_TIME_FORMAT const in JHipster + Angular2+ project

I am currently working on a Angular2+/Typescript/Bootstrap project generated with JHipster in which I have an entity "CalendarEvent" that has a startTime field of Java type Instant.
Today this field looks like this :
My problem is that I cannot know if that time is am or pm.
For instance, when I tried :
const startMoment = moment(this.startTime, DATE_TIME_FORMAT);
startMoment.set({hour: 18});
this.startTime= moment(startMoment).format(DATE_TIME_FORMAT);
in order to force the startTime hour to 18h (6pm), the form field showed 06:49. I therefore have no way to know if a time is in the morning or in the afternoon.
Now JHipster generated the entity creation/update form, in which the html code of this field is :
<label class="form-control-label" jhiTranslate="myApp.calendarEvent.startTime" for="field_startTime">Start Time</label>
<div class="d-flex">
<input id="field_startTime" type="datetime-local" class="form-control" name="startTime" max="endTime" [(ngModel)]="startTime" required/>
</div>
and the Typescript code (from which I removed few unrelated code):
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { HttpResponse, HttpErrorResponse } from '#angular/common/http';
import { Observable } from 'rxjs';
import * as moment from 'moment';
import { DATE_TIME_FORMAT } from 'app/shared/constants/input.constants';
import { JhiAlertService } from 'ng-jhipster';
import { ICalendarEvent } from 'app/shared/model/calendar-event.model';
import { CalendarEventService } from './calendar-event.service';
#Component({
selector: 'jhi-calendar-event-update',
templateUrl: './calendar-event-update.component.html'
})
export class CalendarEventUpdateComponent implements OnInit {
private _calendarEvent: ICalendarEvent;
isSaving: boolean;
startTime: string;
constructor(
private jhiAlertService: JhiAlertService,
private calendarEventService: CalendarEventService,
private activatedRoute: ActivatedRoute
) {}
ngOnInit() {
this.isSaving = false;
this.activatedRoute.data.subscribe(({ calendarEvent }) => {
this.calendarEvent = calendarEvent;
});
}
previousState() {
window.history.back();
}
save() {
this.isSaving = true;
this.calendarEvent.startTime = moment(this.startTime, DATE_TIME_FORMAT);
if (this.calendarEvent.id !== undefined) {
this.subscribeToSaveResponse(this.calendarEventService.update(this.calendarEvent));
} else {
this.subscribeToSaveResponse(this.calendarEventService.create(this.calendarEvent));
}
}
private subscribeToSaveResponse(result: Observable<HttpResponse<ICalendarEvent>>) {
result.subscribe((res: HttpResponse<ICalendarEvent>) => this.onSaveSuccess(), (res: HttpErrorResponse) => this.onSaveError());
}
private onSaveSuccess() {
this.isSaving = false;
this.previousState();
}
private onSaveError() {
this.isSaving = false;
}
private onError(errorMessage: string) {
this.jhiAlertService.error(errorMessage, null, null);
}
getSelected(selectedVals: Array<any>, option: any) {
if (selectedVals) {
for (let i = 0; i < selectedVals.length; i++) {
if (option.id === selectedVals[i].id) {
return selectedVals[i];
}
}
}
return option;
}
get calendarEvent() {
return this._calendarEvent;
}
set calendarEvent(calendarEvent: ICalendarEvent) {
this._calendarEvent = calendarEvent;
this.startTime = moment(calendarEvent.startTime).format(DATE_TIME_FORMAT);
}
}
Now you can see that the component has a startTime string attribute instanciated like this :
this.startTime = moment(calendarEvent.startTime).format(DATE_TIME_FORMAT);
(with calendarEvent.startTime of type Instant). Now in a config file, I saw :
export const DATE_TIME_FORMAT = 'YYYY-MM-DDThh:mm';
I thought that by changing the value of DATE_TIME_FORMAT to something like LLLL (found on Moment.js documentation) I would easily get a clearer format, but unfortunately, not only it does not change the form format, but it also appears uninitialized by default :
I also join my package.json and .yo-rc.json that are often asked to people requesting support (if any help) :
package.json
{
"name": "platform-overview-2",
"version": "0.0.0",
"description": "Description for platformOverview2",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular/common": "6.0.0",
"#angular/compiler": "6.0.0",
"#angular/core": "6.0.0",
"#angular/forms": "6.0.0",
"#angular/platform-browser": "6.0.0",
"#angular/platform-browser-dynamic": "6.0.0",
"#angular/router": "6.0.0",
"#fortawesome/angular-fontawesome": "0.1.0-9",
"#fortawesome/fontawesome-svg-core": "1.2.0-11",
"#fortawesome/free-solid-svg-icons": "5.1.0-8",
"#ng-bootstrap/ng-bootstrap": "2.0.0",
"bootstrap": "4.0.0",
"core-js": "2.5.3",
"jquery": "3.3.1",
"moment": "2.21.0",
"ng-jhipster": "0.5.4",
"ngx-cookie": "2.0.1",
"ngx-infinite-scroll": "0.5.1",
"ngx-webstorage": "2.0.1",
"reflect-metadata": "0.1.12",
"rxjs": "6.1.0",
"rxjs-compat": "6.1.0",
"swagger-ui": "2.2.10",
"tslib": "1.9.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.1.1",
"#angular/compiler-cli": "6.0.0",
"#ngtools/webpack": "6.0.0",
"#types/jest": "22.2.3",
"#types/node": "9.4.7",
"angular-router-loader": "0.8.2",
"angular2-template-loader": "0.6.2",
"browser-sync": "2.24.4",
"browser-sync-webpack-plugin": "2.2.2",
"cache-loader": "1.2.2",
"codelyzer": "4.2.1",
"copy-webpack-plugin": "4.5.1",
"css-loader": "0.28.10",
"exports-loader": "0.7.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "1.1.11",
"fork-ts-checker-webpack-plugin": "0.4.1",
"friendly-errors-webpack-plugin": "1.7.0",
"generator-jhipster": "5.1.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"husky": "0.14.3",
"jest": "22.4.3",
"jest-junit": "5.1.0",
"jest-preset-angular": "5.2.2",
"jest-sonar-reporter": "2.0.0",
"lint-staged": "7.0.0",
"merge-jsons-webpack-plugin": "1.0.14",
"moment-locales-webpack-plugin": "1.0.5",
"prettier": "1.11.1",
"proxy-middleware": "0.15.0",
"raw-loader": "0.5.1",
"rimraf": "2.6.1",
"simple-progress-webpack-plugin": "1.1.2",
"style-loader": "0.20.3",
"tapable": "1.0.0",
"thread-loader": "1.1.5",
"to-string-loader": "1.1.5",
"ts-loader": "4.0.1",
"tslint": "5.9.1",
"tslint-config-prettier": "1.9.0",
"tslint-loader": "3.6.0",
"typescript": "2.7.2",
"uglifyjs-webpack-plugin": "1.2.5",
"webpack": "4.8.0",
"webpack-cli": "2.1.3",
"webpack-dev-server": "3.1.4",
"webpack-merge": "4.1.2",
"webpack-notifier": "1.6.0",
"webpack-visualizer-plugin": "0.1.11",
"workbox-webpack-plugin": "3.2.0",
"write-file-webpack-plugin": "4.2.0",
"xml2js": "0.4.19"
},
"engines": {
"node": ">=8.9.0",
"yarn": ">=1.3.2"
},
"lint-staged": {
"src/**/*.{ts,css,scss}": [
"prettier --write",
"git add"
]
},
"scripts": {
"precommit": "lint-staged",
"prettier:format": "yarn prettier --write 'src/**/*.{ts,css,scss}'",
"lint": "tslint --project tsconfig.json -e 'node_modules/**'",
"lint:fix": "yarn run lint --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "yarn run webpack:dev",
"serve": "yarn run start",
"build": "yarn run webpack:prod",
"test": "yarn run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
"test:watch": "yarn test --watch --clearCache",
"webpack:dev": "yarn run webpack-dev-server --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
"webpack:dev-verbose": "yarn run webpack-dev-server --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
"webpack:build:main": "yarn run webpack --config webpack/webpack.dev.js --env.stats=normal",
"webpack:build": "yarn run cleanup && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack --config webpack/webpack.prod.js --profile",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
"webpack:test": "yarn run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
},
"jestSonar": {
"reportPath": "target/test-results/jest",
"reportFile": "TESTS-results-sonar.xml"
}
}
.yo-rc.json
{
"generator-jhipster": {
"promptValues": {
"packageName": "com.worldline.app",
"nativeLanguage": "en"
},
"jhipsterVersion": "5.1.0",
"applicationType": "monolith",
"baseName": "platformOverview2",
"packageName": "com.worldline.app",
"packageFolder": "com/worldline/app",
"serverPort": "8080",
"authenticationType": "jwt",
"cacheProvider": "ehcache",
"enableHibernateCache": true,
"websocket": false,
"databaseType": "sql",
"devDatabaseType": "h2Disk",
"prodDatabaseType": "mysql",
"searchEngine": false,
"messageBroker": false,
"serviceDiscoveryType": false,
"buildTool": "maven",
"enableSocialSignIn": false,
"enableSwaggerCodegen": false,
"jwtSecretKey": "455e1315207269bf7ba9685bdba93b4ff0224ba0",
"clientFramework": "angularX",
"useSass": false,
"clientPackageManager": "yarn",
"testFrameworks": [],
"jhiPrefix": "jhi",
"enableTranslation": true,
"nativeLanguage": "en",
"languages": [
"en",
"fr",
"de",
"es",
"ro",
"zh-cn",
"pl"
]
}
}
Please let me know if you need more information.
Thanks in advance for any help you can provide :) !

Push notification is not working on Background

I'm using native firebase plugin's push notification feature.
Current behavior:
It is working fine with the foreground.But when the app is in the background and I try to tap the notification it shows undefined.Please see the video below.I have tested this on Anroid device.
Expected behavior:
When I tap the notification message it should open the app and show the message correctly.
Video
app.component.ts
constructor(public platform: Platform)
{
platform.ready().then(() => {
this.onNotificationOpen();
});
}
onNotificationOpen(): void {
if (this.platform.is('cordova')) {
this.firebase.onNotificationOpen()
.subscribe(res => {
if (res.tap) {//background mode
console.log(res.body);
this.showAlert(res.body);
} else if (!res.tap) {//foreground mode
console.log(res.body);
this.showAlert(res.body);
}
});
}
}
showAlert(message: string): void {
let alert = this.alertCtrl.create({
title: 'Push Notification',
subTitle: message,
buttons: ['OK']
});
alert.present();
}
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"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.6.1",
"#ionic-native/device": "3.6.1",
"#ionic-native/facebook": "^3.10.0",
"#ionic-native/firebase": "^3.10.3",
"#ionic-native/keyboard": "^3.10.3",
"#ionic-native/splash-screen": "3.6.1",
"#ionic-native/status-bar": "3.6.1",
"#ionic/cli-plugin-cordova": "^1.2.0",
"#ionic/cli-plugin-ionic-angular": "^1.2.0",
"#ionic/storage": "2.0.1",
"#ngrx/core": "^1.2.0",
"#ngrx/store": "^2.2.1",
"d3": "^4.7.4",
"firebase": "^3.7.5",
"ionic-angular": "3.2.1",
"ionicons": "3.0.0",
"moment": "^2.18.1",
"pouchdb": "^6.1.2",
"pouchdb-adapter-cordova-sqlite": "^2.0.2",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.10"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-cordova": "1.2.1",
"#ionic/cli-plugin-ionic-angular": "1.2.0",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "helloWorld: An Ionic project"
}
I'd recommend using the cordova-plugin-firebase instead. You can take a look at this repo to see how to use that plugin.
Please notice that the content of the notification sent will not be the same if the app is running in the foreground or if the app is closed when the notification arrives. In order to handle that, when sending a notification, add the title and the body in the Advanced options section:

Resources