So Maybe we have to use Capacitor?
https://capacitor.ionicframework.com/docs/
Capacitor is a spiritual successor to Apache Cordova and Adobe PhoneGap, with inspiration from other popular cross-platform tools like React Native and Turbolinks, but focused entirely on enabling modern web apps to run on all major platforms with ease. Capacitor has backwards-compatible support for many existing Cordova plugins.
I am having following version of dependencies:
"@ionic-native/music-controls": "^5.8.0",
and ionic info as below:
Ionic:
Ionic CLI : 5.1.0 (C:\Users\Kunal-Kakkad\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.9
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-webview 1.1.1, (and 16 other plugins)
Utility:
cordova-res : 0.5.0
native-run : 0.2.6
System:
NodeJS : v11.6.0 (C:\Program Files\nodejs\node.exe)
npm : 6.5.0
OS : Windows 10
I have also made the changes of …/ngx for import statement.
But still I am facing the same error.
Any kind of help is very helpful.
Thanks
Kunal Kakkad
That’s not me 
I think max’s statement is more about in terms of developer hours, we’re focused on multiple things at the moment. For vue, there’s a few things that we need to spend some time on, but there’s also other/bigger bugs that we need to address in Core that are taking priority. Vue is on our list, but we need to get the rest of the stack in a very good state before dedicating more time to vue.
If user doesn’t kill the app, instead he just pressed home button then app goes in background. And when user launch the app then data is not getting updated cause no api is being called.
What i can do if i want to update the data while launching the app from recent apps section. Where ngOnInit () and ionViewWillEnter () is not getting called. What else i can use to make it work.
I have tried using ionViewWillEnter (), ngOnInit ().
Hello!
I am trying to download file with cordova-plugin-file-transfer on Android device and emulator:
public async downloadFile(task: DownloadTaskModel) {
let path = null;
if (this.platform.is('ios')) {
path = this.file.documentsDirectory;
} else {
path = this.file.dataDirectory;
console.log('downloadFile():', path);
}
const fileTransfer = this.transfer.create();
fileTransfer.download(
task.download_url,
path + task.publish_file,
true, {
headers: {
'Connection': 'close'
}
})
.then(entry => {
console.log('downloadFile(): File downloaded: ', entry);
})
.catch(error => {
console.error('downloadFile(): Dowload failed:', error);
});
}
But nothing is happenning. fileTransfer.download(…) got response from server but downloading does not start:
Should fullPath be “/BigBuckBunny_320x180.mp4” or something longer? Please, tell me what is wrong in response data?
“cordova-plugin-file”: “6.0.1”,
“cordova-plugin-file-transfer”: “1.7.1”,
Ionic:
Ionic CLI : 5.2.0 (/home/artem/.nvm/versions/node/v10.14.1/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
Capacitor:
Capacitor CLI : not installed
@capacitor/core : not installed
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 13 other plugins)
Utility:
cordova-res : 0.3.0 (update available: 0.5.1)
native-run : 0.2.2 (update available: 0.2.7)
System:
Android SDK Tools : 26.1.1 (/home/artem/SDK/Android)
NodeJS : v10.14.1 (/home/artem/.nvm/versions/node/v10.14.1/bin/node)
npm : 6.9.2
OS : Linux 4.9
for now, I am updating the html directly with jquery:
$(’.loading-content’).html(text);
That’s very ugly however. I which the component would support it.
I have a service that tracks network connection state and provides it to components across the application. Then, there’s a popup that has a list view that is supposed to update it’s items async based on new statuses received from network status service, which it does when app is served to chrome or prod built and run on chrome, but it doesn’t when run on android device. Second issue comes when network status triggers setting Login page to root of the main navigation controller. After this change detection starts working only on direct interaction with UI and tabs controllers don’t switch tabs until another page gets focused or app pause/resume.
Any ideas of what may cause this?
"dependencies": {
"@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/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/camera": "5.8.0",
"@ionic-native/core": "5.8.0",
"@ionic-native/document-viewer": "5.8.0",
"@ionic-native/file": "5.8.0",
"@ionic-native/in-app-browser": "5.8.0",
"@ionic-native/network": "5.8.0",
"@ionic-native/photo-viewer": "5.8.0",
"@ionic-native/screen-orientation": "5.8.0",
"@ionic-native/splash-screen": "5.8.0",
"@ionic-native/status-bar": "5.8.0",
"@ionic/storage": "^2.2.0",
"@types/pouchdb": "^6.3.3",
"@types/pouchdb-upsert": "^2.2.6",
"angular-svg-round-progressbar": "2.0.0",
"angular2-signaturepad": "^2.8.0",
"com-sarriaroman-photoviewer": "^1.2.2",
"cordova-android": "^7.1.1",
"cordova-android-support-gradle-release": "^1.4.7",
"cordova-browser": "^5.0.4",
"cordova-ios": "~4.5.5",
"cordova-plugin-advanced-http": "^2.1.1",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-document-viewer": "^0.9.11",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-inappbrowser": "3.0.0",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-screen-orientation": "^3.0.1",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-sqlite-2": "^1.0.6",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.6.0",
"es6-promise-plugin": "^4.2.2",
"ion-datepicker": "2.8.0",
"ionic-angular": "3.9.6",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-rating": "1.2.2",
"ionicons": "^3.0.0",
"ng2-validation": "^4.2.0",
"npm": "^4.6.1",
"pouchdb": "^7.0.0",
"pouchdb-adapter-cordova-sqlite": "^2.0.5",
"pouchdb-upsert": "^2.2.0",
"rxjs": "5.5.2",
"sw-toolbox": "^3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.4",
"cordova-plugin-advanced-http": "~2.0.9",
"ionic": "^4.12.0",
"typescript": "2.8.1"
},
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-sqlite-storage": {},
"cordova-plugin-camera": {},
"cordova-plugin-screen-orientation": {},
"com-sarriaroman-photoviewer": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-document-viewer": {},
"cordova-android-support-gradle-release": {
"ANDROID_SUPPORT_VERSION": "27.+"
},
"cordova-plugin-file": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-network-information": {},
"cordova-plugin-sqlite-2": {},
"cordova-plugin-advanced-http": {
"OKHTTP_VERSION": "3.10.0"
}
},
"platforms": [
"browser",
"android",
"ios"
]
}
@Injectable()
export class EnvironmentService {
public isOnline: boolean;
public isOnline$: BehaviorSubject<boolean>;
private onlineDelay = 5000;
constructor(private network: Network, private platform: Platform, private apRef: ApplicationRef, private ngZone: NgZone) {
this.isOnline = navigator.onLine;
this.isOnline$ = new BehaviorSubject<boolean>(navigator.onLine);
let onlineSource$: Observable<boolean>;
let offlineSource$: Observable<boolean>;
if (this.platform.is('mobileweb')) {
onlineSource$ = fromEvent(window, 'online').mapTo(true).delay(this.onlineDelay);
offlineSource$ = fromEvent(window, 'offline').mapTo(false);
}
else {
onlineSource$ = this.network.onConnect().mapTo(true).delay(this.onlineDelay);
offlineSource$ = this.network.onDisconnect().mapTo(false);
}
let networkStatus$ = onlineSource$.merge(offlineSource$);
this.ngZone.run(() => {
networkStatus$.subscribe(status => {
this.isOnline = status;
this.apRef.tick();
this.isOnline$.next(status);
});
})
}
snippet responsible for navigation based on network status
this.environment.isOnline$
.pipe(
skip(1),
filter(isOnline => isOnline),
flatMap(() => this.auth.isAuthenticated()),
).subscribe(isAuthenticated => {
if (isAuthenticated) {
this.processStashedActions();
}
else {
this.nav.setRoot(LoginPage);
}
});
am having trouble installing and starting ionic
PS C:\Ionic\lemmt> ionic info
[ERROR] Error loading @ionic/angular package.json: Error: Cannot find module '@ionic/angular/package'
[ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find module '@ionic/angular-toolkit/package'
[ERROR] Error loading @angular/cli package.json: Error: Cannot find module '@angular/cli/package'
[ERROR] Error loading @angular-devkit/build-angular package.json: Error: Cannot find module
'@angular-devkit/build-angular/package'
[ERROR] Error loading @angular-devkit/schematics package.json: Error: Cannot find module
'@angular-devkit/schematics/package'
Ionic:
Ionic CLI : 5.2.0 (C:\Users\SUNDAY ETOM ENI\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : not installed
@angular-devkit/build-angular : not installed
@angular-devkit/schematics : not installed
@angular/cli : not installed
@ionic/angular-toolkit : not installed
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
PS C:\Ionic\lemmt> ionic serve
> ng run app:serve --host=localhost --port=8100
[ng] 'ng' is not recognized as an internal or external command,
[ng] operable program or batch file.
[INFO] Looks like @angular/cli isn't installed in this project.
This package is required for this command to work properly. The package provides a CLI utility, but the ng binary
was not found in your PATH.
? Install @angular/cli? Yes
> npm.cmd i -D -E @angular/cli
npm ERR! Unexpected end of JSON input while parsing near '...vVEyQy6v5lPzMqwHS1y2m'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SUNDAY ETOM ENI\AppData\Roaming\npm-cache\_logs\2019-06-28T15_30_44_450Z-debug.log
[ERROR] An error occurred while running subprocess npm.
npm.cmd i -D -E @angular/cli exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
I would really appreciate if someone can help me with solution on how to fix it, thanks
I need to retrieve information from my PWA in response to system events (Android but maybe iOS one day too).
I already have the native code to respond to the Android “Activity” (if that’s the right term) and have my PWA successfully hosted by Capacitor and able to load a custom plugin (I’m just implementing it within the main project for simplicity).
I’m now stuck on a couple of details:
notifyListeners("myPluginEvent", ret); statement in the plugin documentation can’t be invoked from a static method but I don’t see how to get hold of the instance that Capacitor is using so I can’t see how to send an event to the web app.Assuming that (1) is solvable then for (2) I guess I can implement some sort of async communication channel via events and plugin calls by tracking some unique IDs but this seems pretty hacky so I want to get some expert opinions first.
Necesito imprimir imagenes en una Impresora termica portatil, estoy creando la aplicación con Ionic 3.9.2 y actualmente uso el Complemento Nativo Bluetooth Serial, Ayuda por favor.
Muchas Gracias de Ante mano
Changing themes and colors is now much easier in Ionic4 and we have seen some really good samples and examples posted by other developers and even Ionic team members with dark themes, and toggling between dark and light themes. We have tried to combine some of these into our apps to get a dark theme, but…
Doing dark theme right is hard, especially the details. For example, the ‘toggle’ border when disabled. Similar issues with alerts, popovers etc…
So, are there any plans for default dark theme colors in Ionic? That can match the iOS/Android default dark colors instead of just another shade of gray.
Here is a link to how I did it…
Hello, I found myself in a similar issue and this resolved my situation:
# add plugin to enable AndroidX in the project
cordova plugin add cordova-plugin-androidx
# add plugin to patch existing plugin source that uses the Android Support Library to use AndroidX
cordova plugin add cordova-plugin-androidx-adapter
Which can be found here:
Look at the status bar plugin to fix this. There should be some code to leverage in app.component.ts
Is that a question? There’s a lot of advertising blurb right there.
I did an example of using a camera with PWA which works with Ionic3 and will work just fine for any other framework.
I suspect Capacitor will also work as it should be able to use the HTML5 PWA option but I’ve not tested that.
As stated before, I’m not an expert on this plugin
I think that your problem is being caused by the native versioning of AppFlow. What I would do is change the version of the app to a greater number and versionate all the older commits to a smaller version
I’m having a very similar problem on an Android app that has been deployed to production for around 6 months now. Any idea if this problem happens for more than just iOS? Great post and thanks for attempting to keep it on topic.
Are you talking about the app version in the config.xml?