Related
When I attempt to open the Razorpay payment gateway for an online transaction, my application immediately crashes when function is execute.
Before accessing the gateway portal, the app crashes.
Used plugin: cordova plugin add com.razorpay.cordova --save
Plugin version : "com.razorpay.cordova": "1.4.14",
Android platform version : android 10.0.0
Package.json
{
"name": "My App",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~13.2.2",
"#angular/core": "~13.2.2",
"#angular/forms": "~13.2.2",
"#angular/platform-browser": "~13.2.2",
"#angular/platform-browser-dynamic": "~13.2.2",
"#angular/router": "~13.2.2",
"#awesome-cordova-plugins/core": "^5.43.0",
"#awesome-cordova-plugins/onesignal": "^5.44.0",
"#awesome-cordova-plugins/status-bar": "^5.43.0",
"#capacitor/app": "1.1.1",
"#capacitor/haptics": "1.1.4",
"#capacitor/keyboard": "1.2.2",
"#capacitor/status-bar": "1.0.8",
"#ionic-native/core": "^5.36.0",
"#ionic/angular": "^6.0.0",
"#ionic/cordova-builders": "^6.1.0",
"#ionic/storage": "^2.2.0",
"com.razorpay.cordova": "1.4.14",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.2.3",
"#angular-eslint/builder": "~13.0.1",
"#angular-eslint/eslint-plugin": "~13.0.1",
"#angular-eslint/eslint-plugin-template": "~13.0.1",
"#angular-eslint/template-parser": "~13.0.1",
"#angular/cli": "~13.2.3",
"#angular/compiler": "~13.2.2",
"#angular/compiler-cli": "~13.2.2",
"#angular/language-service": "~13.2.2",
"#ionic/angular-toolkit": "^6.0.0",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "5.3.0",
"#typescript-eslint/parser": "5.3.0",
"cordova-android": "^10.0.0",
"cordova-browser": "^6.0.0",
"cordova-sqlite-storage": "^6.0.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"onesignal-cordova-plugin": "^3.1.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.4.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-sqlite-storage": {},
"onesignal-cordova-plugin": {},
"com.razorpay.cordova": {}
},
"platforms": [
"browser",
"android"
]
}
}
Razorpay function
payWithRazor(res) {
var options = {
description: 'Credits towards consultation',
image: 'image.png',
currency: res.currency, // your 3 letter currency code
key: this.globalVar.razorpayKey, // your Key Id from Razorpay dashboard
amount: res.amount, // Payment amount in smallest denomiation e.g. cents for USD
name: this.globalVar.loginInfo.firstName + ' ' + this.globalVar.loginInfo.lastName,
order_id: res.id,
prefill: {
email: '',
contact: '9825098250',
name: this.globalVar.loginInfo.firstName + ' ' + this.globalVar.loginInfo.lastName
},
theme: {
color: '#ff6657'
},
modal: {
ondismiss: function () {
alert('dismissed')
}
}
};
RazorpayCheckout.open(options);
var successCallback = (payment_id) => {
alert('payment_id: ' + JSON.stringify(payment_id));
this.razorPaymentDetails = payment_id;
console.log(this.razorPaymentDetails);
this.fnPlaceOrderAPI();
};
var cancelCallback = (error) => {
// alert(error.description + ' (Error ' + error.code + ')');
this.toast.toastShow(error.description + ' (Error ' + error.code + ')')
};
RazorpayCheckout.on('payment.success', successCallback);
RazorpayCheckout.on('payment.cancel', cancelCallback);
}
Need help !!
I need to install a subdirectory of a remote repository as my node dependency.
According to this issue, it is possible to install subdirectories of GitHub repositories as dependencies with yarn 2.x.x https://github.com/yarnpkg/yarn/issues/4725
However, running yarn add https://github.com/mklueh/gridsome/tree/master/gridsome.git produces
Internal Error: Invalid descriptor (git+https://github.com/mklueh/gridsome/tree/master/gridsome.git)
at Module.x (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:435195)
at C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:30958
at Array.map (<anonymous>)
at M.execute (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:30866)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async M.validateAndExecute (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:660570)
at async Y.run (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:17:3854)
at async Y.runExit (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:17:4021)
at async h (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:285303)
at async r (C:\Users\MyPc\Workspace\myproject\.yarn\releases\yarn-2.4.1.cjs:2:283914)
This is the package.json of the submodule.
{
"version": "0.7.23",
"name": "gridsome",
"description": "A JAMstack framework for building blazing fast websites with Vue.js",
"homepage": "https://gridsome.org",
"repository": "https://github.com/gridsome/gridsome",
"bugs": "https://github.com/gridsome/gridsome/issues",
"license": "MIT",
"main": "index.js",
"browser": "app/index.js",
"bin": {
"gridsome": "./bin/gridsome.js"
},
"keywords": [
"vue",
"gridsome",
"static site generator",
"jamstack",
"website",
"blog"
],
"dependencies": {
"#babel/code-frame": "^7.5.5",
"#babel/core": "^7.0.0",
"#gridsome/cli": "^0.3.4",
"#hapi/joi": "^15.1.1",
"#sindresorhus/slugify": "^1.1.0",
"#vue/babel-preset-app": "^4.2.2",
"#vue/component-compiler-utils": "^2.5.2",
"address": "^1.1.0",
"auto-bind": "^2.0.0",
"autoprefixer": "^9.4.7",
"babel-loader": "8.0.5",
"cache-loader": "^2.0.1",
"camelcase": "^5.0.0",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"chalk": "^2.4.2",
"chokidar": "^3.4.2",
"color-string": "^1.5.3",
"columnify": "^1.5.4",
"connect-history-api-fallback": "^1.6.0",
"core-js": "^3.6.4",
"css-loader": "^2.1.0",
"devcert": "^1.1.0",
"dotenv": "^6.2.0",
"enhanced-resolve": "4.1.1",
"eventemitter3": "^3.1.0",
"express": "^4.16.4",
"express-graphql": "^0.12.0",
"fastest-levenshtein": "^1.0.12",
"file-loader": "^3.0.1",
"friendly-errors-webpack-plugin": "^1.7.0",
"fs-extra": "^7.0.1",
"globby": "^9.0.0",
"graphql": "^15.5.0",
"graphql-compose": "7.20.1",
"graphql-playground-middleware-express": "^1.7.12",
"hash-sum": "^1.0.2",
"hirestime": "^3.2.1",
"html-webpack-plugin": "^3.2.0",
"invariant": "^2.2.4",
"is-relative": "^1.0.0",
"is-url": "^1.2.4",
"jest-worker": "24.0.0",
"json-loader": "^0.5.7",
"loader-utils": "^1.2.3",
"lodash": "^4.17.11",
"lokijs": "^1.5.6",
"lru-cache": "^5.1.1",
"md5-file": "^4.0.0",
"mime-types": "^2.1.21",
"mini-css-extract-plugin": "^0.5.0",
"moment": "^2.24.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"p-map": "^2.0.0",
"path-to-regexp": "^2.2.1",
"physical-cpu-count": "^2.0.0",
"pnp-webpack-plugin": "^1.6.4",
"portfinder": "^1.0.20",
"postcss-loader": "^3.0.0",
"potrace": "^2.1.8",
"probe-image-size": "^4.0.0",
"resolve-from": "^5.0.0",
"sharp": "^0.28.1",
"slash": "^2.0.0",
"sockjs": "^0.3.19",
"sockjs-client": "^1.3.0",
"stack-trace": "^0.0.10",
"svgo": "^2.2.2",
"tapable": "2.0.0-beta.5",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.1",
"vue-meta": "^2.2.2",
"vue-router": "^3.1.3",
"vue-server-renderer": "^2.6.10",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.3",
"webpack-chain": "^5.2.0",
"webpack-dev-middleware": "^3.5.2",
"webpack-hot-middleware": "^2.24.3",
"webpack-merge": "^4.2.1",
"yaml-loader": "^0.5.0"
},
"peerDependencies": {
"less-loader": "*",
"sass-loader": "*",
"stylus-loader": "*"
},
"peerDependenciesMeta": {
"sass-loader": {
"optional": true
},
"less-loader": {
"optional": true
},
"stylus-loader": {
"optional": true
}
},
"engines": {
"node": ">=8.3"
},
"contributors": [
{
"name": "Tommy Vedvik (#tomtev)"
},
{
"name": "Hans-Jørgen Vedvik (#hjvedvik)"
}
]
}
What is going wrong here? Does the remote repository need adjustments to work with yarn 2?
i am building bar charts using D3, it runs fine when i run with ionic cordova run/build android but it gives error when i run with --prod mode i.e ionic cordova run/build android --prod. The app opens fine but the bar chart do not draw. The x-axis draws fine but it is unable to draw y- axis. can someone please help. I have attached the image of my error message below. I am stuck in this for the past few days, any help would be really helpful. Thanks in advance
**here is mycode** //
import { Component } from '#angular/core';
import { Platform } from '#ionic/angular';
import * as d3 from 'd3-selection';
import * as d3Scale from 'd3-scale';
import * as d3Array from 'd3-array';
import * as d3Axis from 'd3-axis';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
barData = [
{ season: 'S1', viewers: 250000 },
{ season: 'S2', viewers: 380000 },
{ season: 'S3', viewers: 500000 },
{ season: 'S4', viewers: 690000 },
{ season: 'S5', viewers: 690000 },
{ season: 'S6', viewers: 750000 },
{ season: 'S7', viewers: 1000000 },
{ season: 'S8', viewers: 1700000 }
];
title = 'originals';
subtitle = 'Viewers per season for';
width: number;
height: number;
margin = { top: 20, right: 20, bottom: 30, left: 40 };
x: any;
y: any;
svg: any;
g: any;
constructor(private _platform: Platform) {
this.width = 900 - this.margin.left - this.margin.right;
this.height = 500 - this.margin.top - this.margin.bottom;
}
ionViewDidEnter() {
this.init();
this.initAxes();
this.drawAxes();
this.drawChart();
}
init() {
this.svg = d3.select('#barChart')
.append('svg')
.attr('width', '100%')
.attr('height', '100%')
.attr('viewBox', '0 0 900 500');
this.g = this.svg.append('g')
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
}
initAxes() {
this.x = d3Scale.scaleBand().rangeRound([0, this.width]).padding(0.1);
this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
this.x.domain(this.barData.map((d) => d.season));
this.y.domain([0, d3Array.max(this.barData, (d) => d.viewers)]);
}
drawAxes() {
this.g.append('g')
.attr('class', 'axis axis--x')
.attr('transform', 'translate(0,' + this.height + ')')
.call(d3Axis.axisBottom(this.x))
.attr('font-size', '30');
this.g.append('g')
.attr('class', 'axis axis--y')
.call(d3Axis.axisLeft(this.y))
.append('text')
.attr('class', 'axis-title')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '0.71em')
.attr('text-anchor', 'end')
.attr('fill', 'rgb(34, 167, 240)')
.attr('font-size', '50')
.text('viewers');
}
drawChart() {
this.g.selectAll('.bar')
.data(this.barData)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('fill', 'rgb(34, 167, 240)')
.attr('x', (d) => this.x(d.season))
.attr('y', (d) => this.y(d.viewers))
.attr('width', this.x.bandwidth())
.attr('height', (d) => this.height - this.y(d.viewers));
}
}
**pacjage.json**
{
"name": "example",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~8.1.2",
"#angular/core": "~8.1.2",
"#angular/forms": "~8.1.2",
"#angular/platform-browser": "~8.1.2",
"#angular/platform-browser-dynamic": "~8.1.2",
"#angular/router": "~8.1.2",
"#ionic-native/android-permissions": "^5.17.1",
"#ionic-native/camera": "^5.17.1",
"#ionic-native/core": "^5.0.0",
"#ionic-native/document-viewer": "^5.17.0",
"#ionic-native/file": "^5.17.0",
"#ionic-native/file-opener": "^5.17.0",
"#ionic-native/file-transfer": "^5.17.0",
"#ionic-native/local-notifications": "^5.17.1",
"#ionic-native/network": "^5.17.0",
"#ionic-native/screen-orientation": "^5.17.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^4.7.1",
"#ionic/storage": "^2.2.0",
"cordova-android": "8.1.0",
"cordova-browser": "6.0.0",
"cordova-plugin-android-permissions": "^1.0.2",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-document-viewer": "^0.9.13",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-opener2": "^2.2.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-network-information": "^2.0.2",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-sqlite-storage": "^3.4.0",
"core-js": "^2.5.4",
"d3": "^5.14.2",
"es6-promise-plugin": "^4.2.2",
"jquery": "^3.4.1",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/architect": "~0.801.2",
"#angular-devkit/build-angular": "~0.801.2",
"#angular-devkit/core": "~8.1.2",
"#angular-devkit/schematics": "~8.1.2",
"#angular/cli": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/compiler-cli": "~8.1.2",
"#angular/language-service": "~8.1.2",
"#ionic/angular-toolkit": "^2.1.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-network-information": {},
"cordova-sqlite-storage": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-document-viewer": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-file": {},
"cordova-plugin-file-opener2": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-android-permissions": {},
"cordova-plugin-local-notification": {},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
}
},
"platforms": [
"browser",
"android"
]
}
}
**here is the image of my error message**
[1]: https://i.stack.imgur.com/zs5KM.png
Finally it started working after i added
this.g.append('g')
.call(d3Axis.axisLeft(this.y).tickFormat ((d: any) => {
return d;
})
)
It seemed tickformat is necessary while running in production mode. anyway still thanks.
I am trying to build my ionic project for production, by using the following command.
ionic cordova build android --prod --release, but i always have this error :
JavaScript heap out of memory, so i looked on the web and i tried the following solution : the adding of node --max_old_space_size=4096 in my ionic.cmd file, but it did not worked. As i use firebase, i tried to downgrade firebase using this command :
npm install --save firebase#4.x
So now the GooglePlus class of googleplus plugin of my project is not recognised as an ionic provider. Here are the commands i used to install it :
ionic cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=MY_REVERSE_CLIENT_ID
npm install --save #ionic-native/google-plus
When i am trying to import the GooglePlus class in my app.modules.ts, in the providers section, it is not recognised. I tried to uninstall and re-install everything but it does not work.
{
"name": "app name",
"version": "2.0.1",
"author": "auhtors name",
"homepage": "website url",
"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/animations": "5.2.10",
"#angular/common": "5.2.10",
"#angular/compiler": "5.2.10",
"#angular/compiler-cli": "5.2.10",
"#angular/core": "5.2.10",
"#angular/fire": "^5.0.0",
"#angular/forms": "5.2.10",
"#angular/http": "5.2.10",
"#angular/platform-browser": "5.2.10",
"#angular/platform-browser-dynamic": "5.2.10",
"#ionic-native/admob-free": "^4.7.0",
"#ionic-native/admob-pro": "^4.19.0",
"#ionic-native/app-version": "^4.8.0",
"#ionic-native/barcode-scanner": "^4.19.0",
"#ionic-native/browser-tab": "^4.19.0",
"#ionic-native/camera": "^4.7.0",
"#ionic-native/core": "4.7.0",
"#ionic-native/facebook": "^4.19.0",
"#ionic-native/file": "^4.8.0",
"#ionic-native/file-transfer": "^4.7.0",
"#ionic-native/firebase": "^4.13.0",
"#ionic-native/google-plus": "^5.0.0",
"#ionic-native/in-app-browser": "^4.7.0",
"#ionic-native/instagram": "^4.19.0",
"#ionic-native/local-notifications": "^4.13.0",
"#ionic-native/network": "^4.7.0",
"#ionic-native/open-native-settings": "^4.7.0",
"#ionic-native/social-sharing": "^4.7.0",
"#ionic-native/splash-screen": "4.7.0",
"#ionic-native/status-bar": "^4.7.0",
"#ionic-native/youtube-video-player": "^4.7.0",
"#ionic/storage": "2.1.3",
"angular-pipes": "^8.0.0",
"angularfire2": "^5.1.1",
"cordova-admob-sdk": "^0.17.0",
"cordova-android": "^7.1.4",
"cordova-instagram-plugin": "^0.5.7",
"cordova-ios": "^4.5.5",
"cordova-open-native-settings": "^1.5.2",
"cordova-plugin-add-swift-support": "^1.7.2",
"cordova-plugin-admob-free": "^0.17.4",
"cordova-plugin-admobpro": "^2.37.1",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-badge": "^0.8.7",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-document-viewer": "^0.9.10",
"cordova-plugin-extension": "^1.5.4",
"cordova-plugin-facebook4": "^4.1.0",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-firebase": "^2.0.2",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.4.4",
"cordova-plugin-youtube-video-player": "^1.0.6",
"cordova-promise-polyfill": "0.0.2",
"cordova-universal-clipboard": "git+https://github.com/Visigo/CordovaClipboard.git",
"es6-promise-plugin": "^4.2.2",
"firebase": "^5.8.2",
"ionic-angular": "3.9.2",
"ionic-img-viewer": "^2.9.0",
"ionicons": "3.0.0",
"moment": "^2.22.2",
"ng2-pdf-viewer": "^5.1.0",
"ng2-simple-timer": "^1.3.3",
"ngx-moment": "^3.1.0",
"phonegap-plugin-barcodescanner": "^8.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.1",
"#ionic/lab": "1.0.18",
"typescript": "~2.6.2"
},
"description": "app description",
"cordova": {
"plugins": {
"cordova-plugin-admob-free": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
},
"cordova-instagram-plugin": {},
"cordova-plugin-network-information": {},
"cordova-plugin-camera": {},
"cordova-plugin-file-transfer": {},
"cordova-open-native-settings": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-youtube-video-player": {},
"cordova-plugin-app-version": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"phonegap-plugin-barcodescanner": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-file": {},
"cordova-plugin-document-viewer": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-local-notification": {},
"cordova-plugin-firebase": {},
"cordova-universal-clipboard": {},
"cordova-plugin-admobpro": {
"PLAY_SERVICES_VERSION": "16.0.0"
},
"cordova-plugin-facebook4": {
"APP_ID": "appid",
"APP_NAME": "237actu",
"FACEBOOK_HYBRID_APP_EVENTS": "false",
"FACEBOOK_ANDROID_SDK_VERSION": "4.38.1"
},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "app reverse client id"
}
},
"platforms": [
"android",
"ios"
]
}
}
And here is an excerpt the content of the app.module.ts file
import { GooglePlus } from '#ionic-native/google-plus';
#NgModule({
declarations: [
MyApp,
HomePage,
],
imports: [
AngularFireModule.initializeApp(config),
BrowserModule,
PdfViewerModule,
HttpClientModule,
IonicImageViewerModule,
NgPipesModule,
MomentModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
],
providers: [
AngularFireAuth,
GooglePlus,
UserAuthService,
Facebook,
RestClientService,
AdmobFreeService,
StatusBar,
UserserviceProvider,
SplashScreen,
LocalNotifications,
AdMobFree,
SocialSharing,
Instagram,
Network,
Camera,
FileTransfer,
File,
OpenNativeSettings,
SimpleTimer,
InAppBrowser,
YoutubeVideoPlayer,
BarcodeScanner,
AppVersion,
Firebase,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
Any help ?
thanks in advance.
Add ngx like this:
import { GooglePlus } from '#ionic-native/google-plus/ngx';
Import the plugin in a #NgModule and add it to the list of Providers.
For Angular, the import path should end with /ngx. Angular's change
detection is automatically handled. - https://ionicframework.com/docs/native/
Why babel does not transform my classes?
Syntax error main.js (24,25)
IMAGE: IE11 transformed main.js file
Maybe my configuration is not right?
I try to add support of IE 11 by my app, but babel not work correctly.
I had also added polyfills.ts from angular.io documentation to support IE.
Here I'll show you my .babelrc, webpack.config.js package.json, tsconfig.json.
.babelrc
{
"presets": [
/*[
"env",
{
"uglify":true,
"targets":[
"> 4%",
"ie >= 10",
"safari >= 8"
]
}
]//It gives the same result*/
"es2015", "angular2", "stage-0"
],
"plugins": [
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties",
"transform-es2015-classes",
"babel-plugin-transform-object-rest-spread",
"syntax-object-rest-spread",
"transform-class-constructor-call",
"syntax-class-constructor-call"
]
}`
webpack.config.js
module.exports = (env = {isProd: false}) => {
const config = {
context: srcDir,
entry: {
polyfills: './polyfills.ts',
vendor: './vendor.ts',
main: './main.ts',
styles: './styles.scss'
},
...
resolve: {
extensions: ['.js', '.ts'],
modules: ['node_modules']
},
module: {
loaders: [
],
rules: [
{
test: [/\.js$/],
include: [
path.resolve(__dirname,'src/')
],
exclude: [
/node_modules\/(?!cb-frontend\/).*!/
],
use: {
loader: 'babel-loader'
}
},
{
test: /\.ts$/,
include: [srcDir],
use: env.isProd ? '#ngtools/webpack' : [
{
loader: 'awesome-typescript-loader',
options: {configFileName: 'tsconfig.json'
}
}, 'angular2-template-loader'
]
},
.....
},
plugins: [
....
new webpack.optimize.CommonsChunkPlugin({
name: ['main', 'vendor', 'polyfills']
}),
....
new HtmlPlugin({
template: './index.html'
}),
....
],
....}
package.json
"dependencies": {
"#angular/animations": "5.1.0",
"#angular/cdk": "5.0.1",
"#angular/common": "5.1.0",
"#angular/compiler": "5.1.0",
"#angular/core": "5.1.0",
"#angular/forms": "5.1.0",
"#angular/http": "5.1.0",
"#angular/material": "5.0.1",
"#angular/platform-browser": "5.1.0",
"#angular/platform-browser-dynamic": "5.1.0",
"#angular/platform-server": "5.1.0",
"#angular/router": "5.1.0",
"angular-2-dropdown-multiselect": "1.5.4",
"bootstrap": "4.0.0-alpha.6",
"classlist.js": "1.1.20150312",
"es6-promise": "^4.2.2",
"es6-shim": "^0.35.3",
"gulp": "3.9.1",
"hammerjs": "2.0.8",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"ng2-select2": "1.0.0-beta.10",
"ngx-clipboard": "9.0.0",
"ngx-mydatepicker": "2.1.0",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.5",
"select2": "4.0.5",
"sonarqube-scanner": "2.0.2",
"systemjs": "0.19.39",
"zone.js": "0.8.18"
},
"devDependencies": {
"#angular/compiler-cli": "5.1.0",
"#ngtools/webpack": "1.9.0",
"#types/angular-resource": "1.5.6",
"#types/angular-route": "1.3.2",
"#types/angular-sanitize": "1.3.3",
"#types/jasmine": "2.5.36",
"#types/node": "7.0.31",
"angular2-template-loader": "0.6.2",
"autoprefixer": "7.1.1",
"awesome-typescript-loader": "3.1.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-object-rest-spread": "^6.3.13",
"babel-plugin-transform-class-properties": "^6.0.2",
"babel-plugin-transform-es2015-classes": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.14.0",
"babel-plugin-transform-es2015-template-literals": "^6.3.13",
"babel-plugin-transform-flow-strip-types": "^6.4.0",
"babel-plugin-transform-object-assign": "^6.3.13",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-class-constructor-call": "^6.0.2",
"babel-plugin-syntax-class-constructor-call": "^6.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-angular2": "^0.0.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-native-modules": "^6.9.4",
"babel-preset-es2015-rollup": "1.2.0",
"babel-preset-stage-0": "^6.0.15",
"babel-register": "^6.26.0",
"concurrently": "3.0.0",
"codelyzer": "3.0.1",
"copy-webpack-plugin": "4.0.1",
"core-js": "2.5.1",
"css-loader": "0.28.7",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"html-webpack-plugin": "2.30.1",
"intl": "1.2.5",
"jasmine-core": "2.6.3",
"karma": "1.7.0",
"karma-chrome-launcher": "2.1.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-firefox-launcher": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"node-sass": "4.6.1",
"postcss-loader": "2.0.6",
"raw-loader": "0.5.1",
"sass-loader": "6.0.6",
"style-loader": "0.19.0",
"stylelint": "7.11.1",
"stylelint-config-standard": "16.0.0",
"tslint": "5.4.3",
"typedoc": "0.7.1",
"typescript": "2.5.3",
"uglifyjs-webpack-plugin": "1.0.1",
"web-animations-js": "2.3.1",
"webpack": "^3.8.1",
"webpack-chunk-hash": "^0.4.0",
"webpack-dev-server": "2.9.4",
"webpack-merge": "3.0.0"
}
}
tsconfig.json
{
"compilerOptions": {
"alwaysStrict": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": false,
"sourceMap": true,
"skipLibCheck": true,
"strictNullChecks": true,
"target": "es5",
"typeRoots": [
"./node_modules/#types"
],
"lib": ["es2015", "dom"] /* , "es2015.promise"*/
},
"exclude": [
"node_modules"
],
"angularCompilerOptions": {
"genDir": ".",
"entryModule": "./src/app/app.module#AppModule",
"skipMetadataEmit": true
}
}
--- UPDATE ---
Package.json: devDependencies
{
...
"#angular/compiler-cli": "5.1.0",
"#ngtools/webpack": "1.9.0",
"#types/angular-resource": "1.5.6",
"#types/angular-route": "1.3.2",
"#types/angular-sanitize": "1.3.3",
"#types/jasmine": "2.5.36",
"#types/keycloak-js": "2.5.4",
"#types/node": "7.0.31",
"angular2-template-loader": "0.6.2",
"autoprefixer": "7.1.1",
"awesome-typescript-loader": "3.1.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-register": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-angular2": "^0.0.2",
"babel-plugin-transform-runtime": "^6.23.0",
"uglifyjs-webpack-plugin": "1.0.1",
"web-animations-js": "2.3.1",
...
}