Ionic 4 splash screen not hiding in production mode - cordova-plugins

I have build an app everything is working perfectly. When i run the app through
ionic cordova run android
But which i run the app in production mode splash screen is not hiding. Alert is also not showing up on platform.ready()
ionic cordova run android --prod --release
here is config.xml
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
app.component.ts
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
alert('YES'); //this also not showing in production mode
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}

Sorry! I had installed a native plugin cordova-plugin-x-socialsharing and I did not added it to the provider array in app.module.ts.
After adding it the native plugin to app.module.ts everything was perfect.
import { SocialSharing } from '#ionic-native/social-sharing/ngx';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule
],
providers: [ // Add Native plugins in this array
StatusBar,
SplashScreen,
SocialSharing,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

Related

Hybrid app with Angular and Cordova: Dynamic content not rendered in IOS

I have converted an Angular project into a hybrid app following this guide:
https://medium.com/#christof.thalmann/convert-angular-project-to-android-apk-in-10-steps-c49e2fddd29
For Android I did not run into many issues and the app is working as expected on that platform.
On IOS I ran into multiple difficulties. First of all in order contents display I needed to change the Angular LocationStrategy to HashLocation as describe in this SO topic:
Why Angular Router 8 router ...
Although I now do get content to render I still have trouble getting the dynamic content (i.e. the content requiring a call to a web server before rendering) to render properly.
My app has got a classic NavBar to switch from one component to another. If I activate one component by clicking on a Nav Button the static content gets rendered ok. However, the dynamic content is not there. I can verify this by looking at the source code: The holding the dynamic content is empty. If I click on the same Nav Button again the dynamic content is added. I get the same effect on an iPhone simulator and on a real device.
This is the html of one of the components
<div class="card bg-opaque border-light">
<div class="card-body">
<div>
<h2 class="text-light text-opaque">Einsparungen von {{ user }}</h2>
</div>
<div *ngIf="monthScore" class="card border-primary bg-opaque-light"> <!-- THIS BLOCK NOT VISIBLE -->
<div class="card-body text-center">
<h3 class="card-title">Current Month</h3>
<ul class="list-unstyled">
<li>
<strong>Savings:</strong> {{ monthScore.savings | number: '1.1-2' }} kg
</li>
<li>
<strong>Position:</strong> {{ monthScore.rank }}
<span *ngIf="!monthScore.rank">???</span>
<span *ngIf="monthScore.rank == 1">
<mat-icon class="text-warning">emoji_events</mat-icon>
</span>
</li>
<li>
<strong>Captured:</strong> {{ monthScore.captured | number: '1.1-2' }} kg
</li>
</ul>
<div *ngIf="showMonthButton" >
<button class="btn btn-outline-primary" (click)="toggleMonthGraph()">
<mat-icon>bar_chart</mat-icon>
</button>
</div>
<div *ngIf="!showMonthButton" (click)="toggleMonthGraph()">
<canvas
baseChart
[chartType]="'bar'"
[datasets]="monthChartData"
[labels]="monthChartLabels"
[options]="chartOptions"
[legend]="false">
</canvas>
</div>
</div>
</div>
<div *ngIf="yearScore" class="card border-primary bg-opaque-light"> <!-- THIS BLOCK NOT VISIBLE --> <div class="card-body text-center">
<h3 class="card-title">Current year</h3>
<ul class="list-unstyled">
<li>
<strong>Savings:</strong> {{ yearScore.savings | number: '1.1-2' }} kg
</li>
<li>
<strong>Position:</strong> {{ yearScore.rank }}
<span *ngIf="!yearScore.rank">???</span>
<span *ngIf="yearScore.rank == 1">
<mat-icon class="text-warning">emoji_events</mat-icon>
</span>
</li>
<li>
<strong>Captured:</strong> {{ yearScore.captured | number: '1.1-2' }} kg
</li>
</ul>
<div *ngIf="showYearButton" >
<button class="btn btn-outline-primary" (click)="toggleYearGraph()">
<mat-icon>bar_chart</mat-icon>
</button>
</div>
<div *ngIf="!showYearButton" (click)="toggleYearGraph()">
<canvas
baseChart
[chartType]="'bar'"
[datasets]="yearChartData"
[labels]="yearChartLabels"
[options]="chartOptions"
[legend]="false">
</canvas>
</div>
</div>
</div>
</div>
</div>
<app-inpage></app-inpage>
The .ts file:
import { Component, OnInit } from '#angular/core';
import { SummaryService} from '../summary.service';
import { AuthService } from '../../auth/auth.service';
import { Score } from '../summary';
import { MAT_RIPPLE_GLOBAL_OPTIONS } from '#angular/material/core';
#Component({
selector: 'app-score',
templateUrl: './score.component.html',
styleUrls: ['./score.component.scss']
})
export class ScoreComponent implements OnInit {
monthScore: Score;
yearScore: Score;
user: string;
// Histogramm per Consumer
chartOptions = {
responsive: true,
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
};
yearChartData = [];
yearChartLabels = [];
yearChartTitle: string;
showYearChart: boolean = false;
showYearButton: boolean = true;
monthChartData = [];
monthChartLabels = [];
monthChartTitle: string;
showMonthChart: boolean = false;
showMonthButton: boolean = true;
constructor(private service: SummaryService, private authService: AuthService) { }
ngOnInit(): void {
this.user = this.authService.user
this.getMonthScore();
this.getYearScore();
}
getMonthScore(): void {
this.service.getScore('month').subscribe(score => {
this.monthScore = score;
this.createMonthGraph();
})
}
getYearScore(): void {
console.log('GETTING SCORE')
this.service.getScore('year').subscribe(score => {
this.yearScore = score;
this.createYearGraph();
})
}
private createYearGraph(): void {
this.service.getTimeline('year').subscribe(timelines => {
let data: number[] = [];
let label: string[] = [];
for (let i = 0; i < timelines.length; i++){
data.push(timelines[i].user_savings);
label.push(timelines[i].period.toString());
}
this.yearChartData = [{data: data, label: 'Savings', barThickness: 2, backgroundColor: 'rgba(0, 0, 0, 0.5' }]
this.yearChartLabels = label
})
}
private createMonthGraph(): void {
this.service.getTimeline('month').subscribe(timelines => {
let data: number[] = [];
let label: string[] = [];
for (let i = 0; i < timelines.length; i++){
data.push(timelines[i].user_savings);
label.push(timelines[i].period.toString());
}
this.monthChartData = [{data: data, label: 'Savings', barThickness: 2, backgroundColor: 'rgba(0, 0, 0, 0.5' }]
this.monthChartLabels = label
})
}
toggleYearGraph(): void {
this.showYearChart = !this.showYearChart;
this.showYearButton = !this.showYearButton;
}
toggleMonthGraph(): void {
this.showMonthButton = !this.showMonthButton;
}
}
My config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ticumwelt.co2" version="0.2.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Tracker</name>
<description>
An app to track your savings.
</description>
<author email="mymail#example.com" href="https://example.com">
Developer Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/ios/icons/icon-60#3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icons/icon-60.png" width="60" height="60" />
<icon src="res/ios/icons/icon-60#2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/ios/icons/icon-76.png" width="76" height="76" />
<icon src="res/ios/icons/icon-76#2x.png" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/ios/icons/icon-40.png" width="40" height="40" />
<icon src="res/ios/icons/icon-40#2x.png" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icons/icon.png" width="57" height="57" />
<icon src="res/ios/icons/icon#2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/ios/icons/icon-72.png" width="72" height="72" />
<icon src="res/ios/icons/icon-72#2x.png" width="144" height="144" />
<!-- iPad Pro -->
<icon src="res/ios/icons/icon-167.png" width="167" height="167" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/ios/icons/icon-small.png" width="29" height="29" />
<icon src="res/ios/icons/icon-small#2x.png" width="58" height="58" />
<icon src="res/ios/icons/icon-small#3x.png" width="87" height="87" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/ios/icons/icon-50.png" width="50" height="50" />
<icon src="res/ios/icons/icon-50#2x.png" width="100" height="100" />
<!-- iPad Pro -->
<icon src="res/ios/icons/icon-83.5#2x.png" width="167" height="167" />
<splash src="res/ios/screen/default#2x~universal~anyany.png" />
<preference name="WKWebViewOnly" value="true" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<preference name="WKSuspendInBackground" value="false" />
</platform>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby</string>
</edit-config>
</widget>
And my package.json
{
"name": "com.example.tracker",
"displayName": "Tracker",
"version": "0.2.1",
"description": "An app to track your savings",
"main": "index.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"keywords": [
"ecosystem:cordova"
],
"author": "My Name",
"license": "Apache-2.0",
"private": true,
"dependencies": {
"#angular-material-components/datetime-picker": "^2.0.4",
"#angular/animations": "~9.0.3",
"#angular/cdk": "^9.2.4",
"#angular/common": "~9.0.3",
"#angular/compiler": "~9.0.3",
"#angular/core": "~9.0.3",
"#angular/forms": "~9.0.3",
"#angular/localize": "~9.0.3",
"#angular/material": "^9.2.4",
"#angular/platform-browser": "~9.0.3",
"#angular/platform-browser-dynamic": "~9.0.3",
"#angular/router": "~9.0.3",
"#ionic-native/background-geolocation": "^5.29.0",
"#ionic-native/core": "^5.29.0",
"#ionic/angular": "^5.4.1",
"#ng-bootstrap/ng-bootstrap": "^6.2.0",
"bootstrap": "^4.4.0",
"chart.js": "^2.9.4",
"cordova-plugin-splashscreen": "6.0.0",
"material-design-icons-iconfont": "^6.1.0",
"ng-connection-service": "^1.0.4",
"ng2-charts": "^2.4.2",
"ngx-cookie-service": "^10.1.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1002.0",
"#angular/cli": "~9.0.4",
"#angular/compiler-cli": "~9.0.3",
"#angular/language-service": "~9.0.3",
"#globules-io/cordova-plugin-ios-xhr": "^1.2.0",
"#mauron85/cordova-plugin-background-geolocation": "^3.1.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"cordova-ios": "^6.1.1",
"cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-whitelist": "^1.3.4",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-geolocation": {
"GPS_REQUIRED": "true"
},
"cordova-plugin-background-geolocation": {
"ALWAYS_USAGE_DESCRIPTION": "This app always requires location tracking",
"MOTION_USAGE_DESCRIPTION": "This app requires motion detection"
},
"#globules-io/cordova-plugin-ios-xhr": {}
},
"platforms": [
"ios"
]
}
}
My suspicion is that it has something to do with the WKWebView of Apple. As it is the first time I am actually developing something in the Apple World I have the feeling that some Apple security feature is blocking something.
Update:
I did 2 additional checks:
In order to check if any styling stuff was causing the issue I removed all the stylings. However, same problem.
In order to check if the dynamic data is actually fetched from the server when initiating the component I added a console.log() to print the data after it is fetched. It is fetched correctly but the screen does not update to display the data.
Update 2:
Updating from Angular 9 to Angular 10 also did not solve the problem.
After a lot of trial and error and searching I found the solution.
I found a hint here:
https://github.com/angular/angular/issues/7381[1]
For a reason I fo not fully understand yet the app seems to switch zones during the async call to the server. Therefore the UI change mechanism is not triggered and the screen is not updated.
By wrapping the changes of variables into NgZone.run()the screen is updated correctly.
The updated .ts file
import { Component, OnInit, NgZone } from '#angular/core';
// ...
constructor(private service: SummaryService, private authService: AuthService, private zone: NgZone) { }
// ...
getMonthScore(): void {
this.service.getScore('month').subscribe(score => {
this.zone.run(() => {
this.monthScore = score;
this.createMonthGraph();
console.log('GOT MONTH SCORE');
console.log(score);
});
})
}
This is required only when building an iOS app with Cordova. When building an Android app or using the browser does not seem necessary.

Load URL from ImageView

I need to load a URL inside my app with the click of an ImageView. I get the app to load until I start trying to assign intents (on the MainActivity.java) to my ImageViews (on activity_main.xml).
I have tried ImageButton vs ImageView; and both come with their own set of issues I can't seem to find answers to. I finally gave up on the imageButton and am now trying my luck at ImageView. All Android components are up-to-date which includes the software itself, the gradle, and plugins.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/mainBackground"
tools:context=".MainActivity">
<ImageView
android:id="#+id/s"
android:layout_width="0dp"
android:layout_height="0dp"
android:clickable="true"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="16dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/y"
app:layout_constraintEnd_toStartOf="#+id/v"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/s"
tools:visibility="visible" />
<ImageView
android:id="#+id/v"
android:layout_width="0dp"
android:layout_height="0dp"
android:clickable="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/q"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/s"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/v"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package com.app.sega;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import java.net.URI;
import java.net.URL;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView img_s = (ImageView) findViewById(R.id.s);
img.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Intent intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.addCategory(Intent.CATEGORY_BROWSABLE);
intent.setData(Uri.parse("http://southeastgeorgiatoday.com"));
startActivity(intent);
}
});
ImageView img_v = (ImageView) findViewById(R.id.q);
img.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Intent intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.addCategory(Intent.CATEGORY_BROWSABLE);
intent.setData(Uri.parse("http://us7.maindigitalstream.com/2780/"));
startActivity(intent);
}
});
}
}
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.app.sega" >
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme" >
<activity android:name=".MainActivity" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<data android:scheme="http" android:host="www.southeastgeorgiatoday.com" />
<data android:scheme="http" android:host="us7.maindigitalstream.com/2780/" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
The objective is to open the url of the intent inside the app with the click of the referenced ImageView. But since including this intent script on the MainActivity.java it will not build, let alone install and launch. I have tried it both on the virtual and actual device via Android's Emulator and it will not install on either.
Here is the error message I get from the LogCat during the build process...
C:\Users\webwi\Documents\_MobileApps\SEGA\app\src\main\java\com\app\sega\MainActivity.java:23: error: cannot find symbol
img.setOnClickListener(new View.OnClickListener() {
^
symbol: variable img
location: class MainActivity
C:\Users\webwi\Documents\_MobileApps\SEGA\app\src\main\java\com\app\sega\MainActivity.java:33: error: cannot find symbol
img.setOnClickListener(new View.OnClickListener() {
^
symbol: variable img
location: class MainActivity
2 errors
Also, it might be worth mentioning in both of the intent lines that begin with "img.setOnClickListener..." the 'img' before the '.' is red.
Obviously there is something wrong with my intents, I'm just not sure what? Any advice.

React Native tabbar flickering

I have used React native native base library for Tabbar with 4 screens but it is flickering while switch tabs.
import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs } from 'native-base';
import Tab1 from './tabOne';
import Tab2 from './tabTwo';
​export default class TabsExample extends Component {
render() {
return (
<Container>
<Header hasTabs />
<Tabs initialPage={1}>
<Tab heading="Tab1">
<Tab1 />
</Tab>
<Tab heading="Tab2">
<Tab2 />
</Tab>
<Tab heading="Tab3">
<Tab3 />
</Tab>
</Tabs>
</Container>
);
}
}
I had a similar problem when I developed an app as well in react-native. The problem for me was that I had used componentsWillUpdate for animations. Instead I did a helper function for the animations.
Don't know how the rest of your code looks like but this solved my problem.
You can be here that you want to
1, Install: switch-react-native
npm i switch-react-native
2, Using lib:
import React, { Component } from 'react';
import { View } from 'react-native';
import { Switch } from 'switch-react-native';
class SwitchExample extends Component {
render() {
return (
<View>
<Switch
height={40}
width={300}
activeText={`Active Text`}
inActiveText={`InActive Text`}
onValueChange={(value: any) => console.log(value)}
/>
</View>
);
}
}

Custom ionic/cordva plugin for iOS. Method not defined in plugin error

I am writing my custom plugin in ionic for iOS in swift but I get the following error:
ERROR: Method 'initialize:' not defined in Plugin 'RabbitMqPlugin'
I have searched in order to find solution but I could not figure out what is the problem.
Below is my code.
plugin.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="cordova-plugin-rabbitmq"
version="0.0.1">
<name>RabbitMqPlugin</name>
<js-module src="www/plugin.js" name="RabbitMqPlugin">
<clobbers target="RabbitMqPlugin" />
</js-module>
<!-- ios -->
<dependency id="cordova-plugin-cocoapod-support" />
<dependency id="cordova-plugin-add-swift-support" />
<platform name="ios">
<pods-config ios-min-version="9.0" use-frameworks="true">
</pods-config>
<pod name="RMQClient" />
<config-file target="config.xml" parent="/*">
<feature name="RabbitMqPlugin">
<param name="ios-package" value="CDVDevice"/>
</feature>
</config-file>
<source-file src="src/ios/CDVHttpRequest.swift" />
<source-file src="src/ios/CDVRabbitMq.swift" />
<source-file src="src/ios/CDVRabbitMqPlugin.swift" />
</platform>
</plugin>
plugin.js file in www folder:
var exec = require('cordova/exec');
var PLUGIN_NAME = 'RabbitMqPlugin';
var RabbitMqPlugin = {
initialize: function(phrase, cb) {
exec(cb, null, PLUGIN_NAME, 'initialize', [phrase]);
}
};
module.exports = RabbitMqPlugin;
CDVRabbitMqPlugin.swift file in src/ios folder:
import Foundation
#objc(RabbitMqPlugin) class RabbitMqPlugin : CDVPlugin {
var mRabbit:rabbitMQ!;
#objc(initialize:)
func initialize(_ command: CDVInvokedUrlCommand){
var pluginResult = CDVPluginResult(
status: CDVCommandStatus_ERROR
);
let token = command.arguments[0] as! String;
if (token.characters.count > 0) {
mRabbit = rabbitMQ(mToken: token);
pluginResult = CDVPluginResult(
status: CDVCommandStatus_ERROR
);
}
self.commandDelegate!.send(
pluginResult,
callbackId: command.callbackId
)
}
}
I have installed the cordova-plugin-add-swift-support module in order to support swift.
I have added custom plugin ionic plugin for Android and I implemented to my ionic project successfully.
Hope you can help me. Thank you
Your feature in the plugin.xml is wrong, it should be
<feature name="RabbitMqPlugin">
<param name="ios-package" value="RabbitMqPlugin"/>
</feature>
Also, if you are not naming the classes with CDVClassname, don't name the files that contain those classes starting with CDV, not sure if that will fail in Swift, but better name the Swift files with the same name the class they contain

How import cordova custom plugin in ionic project?

I add my custom plugin in my project ionic 3 in this mode:
ionic cordova plugin add /path/to/custom/plugin
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
declare var className: any;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
className.plugins.ClassName.methodName("======> WORK");
}
}
plugin.xml
<js-module src="www/ClassName.js" name="ClassName">
<clobbers target="className" />
</js-module>
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="ClassName">
<param name="ios-package" value="ClassName"/>
</feature>
</config-file>
<header-file src="src/ios/ClassName.h" />
<source-file src="src/ios/ClassName.m" />
</platform>
ClassName.js
function ClassName() {
}
ClassName.prototype.methodName = function(echo, successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, "ClassName", "methodName", [echo]);
};
module.exports = new ClassName();
ClassName.m
#import "ClassName.h"
#implementation ClassName
-(void)methodName:(CDVInvokedUrlCommand *)command {
NSString* echo = [command.arguments objectAtIndex:0];
NSLog(#"%#", echo);
}
#end
ClassName.h
#import <Cordova/CDVPlugin.h>
#interface ClassName : CDVPlugin
-(void)methodName:(CDVInvokedUrlCommand *)command;
#end
I build project and go in xcode to try, but simulator show only black screen and no see log by NSLog...
How i can resolve? What is the correct method to import custom plugins? Thanks
You need to ensure the platform is loaded before calling your plugin.
Use platform.ready()
constructor(public navCtrl: NavController,public platform:Platform) {
this.platform.ready().then(()=>{
className.plugins.ClassName.methodName("======> WORK");
});
}

Resources