Hello,

I’m using cordova-plugin-inappbrowser (https://github.com/apache/cordova-plugin-inappbrowser) in my project, is it possible to add WKWebViewOnly flag to ionic 4/5 project that uses capacitor ?

Thanks

Hi! Just a little correction.

npm install -g cordova because it will install the latest version

And next:

ionic cordova platform rm android
ionic cordova platform add android

Hope this helps

If you look closely to the error log it would say something like (you already have an android folder, you should delete that folder before runing ionic capacitor add android), so. what do you think you should do ?, that’s right you have to delete that folder and run the command again.

if 1 start dev server 1 see an error:

[ng] ERROR in ../mts-crosslife/node_modules/@angular/core/esm2015/core.js
[ng] Module not found: Error: Can't resolve 'rxjs/Observable' in '/var/www/mts-crosslife/node_modules/@angular/core/esm2015'
[ng] ERROR in ../mts-crosslife/node_modules/@angular/core/esm2015/core.js
[ng] Module not found: Error: Can't resolve 'rxjs/Subject' in '/var/www/mts-crosslife/node_modules/@angular/core/esm2015'
[ng] ERROR in ../mts-crosslife/node_modules/ionic-angular/es2015/components/input/input.js
[ng] Module not found: Error: Can't resolve 'rxjs/Subject' in '/var/www/mts-crosslife/node_modules/ionic-angular/es2015/components/input'
[ng] ERROR in ../mts-crosslife/node_modules/ionic-angular/es2015/components/tabs/tabs.js
[ng] Module not found: Error: Can't resolve 'rxjs/Subject' in '/var/www/mts-crosslife/node_modules/ionic-angular/es2015/components/tabs'
[ng] ERROR in ../mts-crosslife/node_modules/@angular/core/esm2015/core.js
[ng] Module not found: Error: Can't resolve 'rxjs/Subscription' in '/var/www/mts-crosslife/node_modules/@angular/core/esm2015'
[ng] ERROR in ../mts-crosslife/node_modules/ionic-angular/es2015/components/input/input.js
[ng] Module not found: Error: Can't resolve 'rxjs/add/operator/takeUntil' in '/var/www/mts-crosslife/node_modules/ionic-angular/es2015/components/input'
[ng] ERROR in ../mts-crosslife/node_modules/ionic-angular/es2015/components/tabs/tabs.js
[ng] Module not found: Error: Can't resolve 'rxjs/add/operator/takeUntil' in '/var/www/mts-crosslife/node_modules/ionic-angular/es2015/components/tabs'
[ng] ERROR in ../mts-crosslife/node_modules/@angular/forms/esm2015/forms.js
[ng] Module not found: Error: Can't resolve 'rxjs/observable/forkJoin' in '/var/www/mts-crosslife/node_modules/@angular/forms/esm2015'
[ng] ERROR in ../mts-crosslife/node_modules/@angular/forms/esm2015/forms.js
[ng] Module not found: Error: Can't resolve 'rxjs/observable/fromPromise' in '/var/www/mts-crosslife/node_modules/@angular/forms/esm2015'
[ng] ERROR in ../mts-crosslife/node_modules/@angular/core/esm2015/core.js
[ng] Module not found: Error: Can't resolve 'rxjs/observable/merge' in '/var/www/mts-crosslife/node_modules/@angular/core/esm2015'
[ng] ERROR in ../mts-crosslife/node_modules/@angular/forms/esm2015/forms.js
[ng] Module not found: Error: Can't resolve 'rxjs/operator/map' in '/var/www/mts-crosslife/node_modules/@angular/forms/esm2015'
[ng] ERROR in ../mts-crosslife/node_modules/@angular/core/esm2015/core.js
[ng] Module not found: Error: Can't resolve 'rxjs/operator/share' in '/var/www/mts-crosslife/node_modules/@angular/core/esm2015'

**ionic info**

Ionic:
   Ionic CLI                     : 6.6.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0
Capacitor:
   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1
Utility:
   cordova-res (update available: 0.13.1) : 0.9.0
   native-run (update available: 1.0.0)   : 0.2.9
System:
   NodeJS : v12.4.0 (/usr/local/bin/node)
   npm    : 6.12.0
   OS     : Linux 4.15

rxjs is installed:
“rxjs”: “~6.5.1”,
“rxjs-compat”: “^6.5.5”,
What am I doing wrong?

hello,

i’am trying to build ionic app with flow i’ve have several issues :

• the resources icons and splash are not copied
• want to user yarn to build but config not respected
• An exception raise in android log

dependencies :

Ionic:

  Ionic CLI       : 6.6.0 (/home/franckysolo/.npm-global/lib/node_modules/@ionic/cli)
  Ionic Framework : @ionic/vue 0.0.9

Capacitor:

  Capacitor CLI   : 2.0.1
  @capacitor/core : 2.0.1

Utility:

  cordova-res : 0.13.1
  native-run  : 1.0.0

System:

  NodeJS : v10.18.0 (/usr/bin/node)
  npm    : 6.9.0
  OS     : Linux 4.15

i 've tried differents solutions to copy resources :

1 - Add the resources via android studio and copy icons and splashes in res android directory
2 - Use cordova-res
3 - Use a live generator to get images and copy icons and splashes in res android directory

What’s happen :

When using my own resources (1 , 3) i build on app flow the default splashes and icons are present but not mine
When using cordova-res on local build (2) splashes are cropped and splashes and icons not build on app flow steel have defaults

When i run npx cap open android, build and run several exceptions are raised :

E/chatdmvet.ioni: Invalid ID 0x00000000.
E/PluginManager: Uncaught exception from plugin
    android.content.res.Resources$NotFoundException: String resource ID #0x0
        at android.content.res.Resources.getText(Resources.java:382)
        at android.content.res.Resources.getString(Resources.java:475)
        at android.content.Context.getString(Context.java:641)
        at com.ionicframework.common.IonicCordovaCommon.getStringResourceByName(IonicCordovaCommon.java:341)
        at com.ionicframework.common.IonicCordovaCommon.getNativeConfig(IonicCordovaCommon.java:425)
        at com.ionicframework.common.IonicCordovaCommon.getPreferences(IonicCordovaCommon.java:384)
        at com.ionicframework.common.IonicCordovaCommon.execute(IonicCordovaCommon.java:92)
        at org.apache.cordova.CordovaPlugin.execute(CordovaPlugin.java:98)
        at org.apache.cordova.PluginManager.exec(PluginManager.java:132)
        at com.getcapacitor.MessageHandler.callCordovaPluginMethod(MessageHandler.java:70)
        at com.getcapacitor.MessageHandler.postMessage(MessageHandler.java:46)
        at android.os.MessageQueue.nativePollOnce(Native Method)
        at android.os.MessageQueue.next(MessageQueue.java:336)
        at android.os.Looper.loop(Looper.java:197)
        at android.os.HandlerThread.run(HandlerThread.java:67)

Another issue with pwa :

Line 1 - Msg: Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('https://ionic.chatdmvet.com/') with script ('https://ionic.chatdmvet.com/service-worker.js'): ServiceWorker script evaluation failed
D/ViewRootImpl@b10dcef[MainActivity]: ViewPostIme key 0

Strange as the js file is available!

As i use a vue project and it’s not supported
i was oblige to convert vue project in ionic project to make it work with app flow
so now i’ve to many configs files

1. capacitor.config.json for capacitor
2. ionic.config.json for ionic
3. vue.config.json for vuejs
4. config.xml for cordova-res

capacitor.config.json

{
  "appId": "com.chatdmvet.ionic",
  "appName": "chatDMVet",
  "bundledWebRuntime": false,
  "npmClient": "yarn",
  "webDir": "www",
  "server": {
    "url": "https://ionic.chatdmvet.com",
    "allowNavigation": [
      "chatdmvet.com",
      "*.pusher.com",
      "dmv-platform.s3.amazonaws.com"
    ]
  },
  "android": {
    "allowMixedContent": true,
    "captureInput": true,
    "webContentsDebuggingEnabled": true
  },
  "linuxAndroidStudioPath": "/opt/android-studio/bin/studio.sh",
  "windowsAndroidStudioPath": "C:\\Program Files\\Android\\Android Studio\\bin\\studio64.exe"
}

ionic.config.json

{
  "name": "chatdmvet",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue"
}

vue.config.js

const _ = require('lodash')
const webpack = require('webpack')
const path = require('path')
const pattern =  /\@angular(\\|\/)core(\\|\/)fesm5/
const sourceDirectory = path.join(__dirname, 'src')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ContextReplacementPlugin(pattern, sourceDirectory)
    ]
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV == 'production') {
      // use default config plugin pwa
      config.plugin('workbox')
    }

    config
      .plugin('provide')
      .use(webpack.ProvidePlugin, [{
          $: 'jquery',
          jquery: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
      }])
      config.plugin('html')
        .tap(args => {
         if (args[0].minify) {
           args[0].minify.removeAttributeQuotes = false
         }
         return args
       })
      // fix warning angular/core
      config.module
        .rule('angular-core-js')
        .test(/[\/\\]@angular[\/\\].+\.js$/)
        .use('cache-loader')
        .loader('cache-loader')
        .end()
        .use('babel-loader')
        .loader('babel-loader')
        .end()
        .parser({ system: true })
  },
  pwa: {
     // @see https://github.com/bradtraversy/zip-info-pwa/blob/f9bd349d3354ad4e3ee62a0a7169d5749d9ee2b8/vue.config.js
     // for more config
     name: 'chatDMVet',
     short_name: "chatDMVet",
     themeColor: '#3490dc',
     start_url: '/'
  }
}

the config xml

<?xml version='1.0' encoding='utf-8'?>
<widget
    id="com.chatdmvet.ionic"
    version="0.1.0"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>chatDMVet</name>
    <description>An awesome chat for veterinaries hospital.</description>
    <author email="franckysolo@gmail.com" href="http://www.franckysolo-productions.com/">
      MATHERAT Franck
    </author>
    <author email="nicolas@lemarson.com" href="https://gnmwebdesign.com//">
      Marson nicolas
    </author>
    <access origin="*" />
    <feature name="IonicCordovaCommon">
      <param name="android-package" value="com.ionicframework.common.IonicCordovaCommon" onload="true"/>
    </feature>
    <feature name="StreamingMedia">
      <param name="android-package" value="com.hutchind.cordova.plugins.streamingmedia.StreamingMedia"/>
    </feature>
    <feature name="Whitelist">
      <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin"/>
      <param name="onload" value="true"/>
    </feature>
    <platform name="android">
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />

        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
        <string>Used to take pictures</string>
    </edit-config>
    <engine name="android" spec="7.1.4" />
    <engine name="ios" spec="4.5.5" />
</widget>

My questions :

1. Is appflow compatible with vue-ionic-capacitor project?
2. if yes, how to deal with resources?
3. What file is read for the config, all? ionic? capacitor? vue? config.xml? none of them? merge of them?
4. Why service worker are not available (Error during service worker registration) as the file is available throw browser?
5. Maybe I’m missing something, any ideas?

Thanks
fky

I Think you might have your routes set up incorrectly…

• Why do you have an IonPage element where it is?
• Also what is <SideMenu></SideMenu> ?
• Why is your login page in you Tabs route?

I think you are getting all of the re-renders because of how you setup the structure. I might suggest starting with the base of one of the starter templates and building upon that

Hi,
I need assistance setting-up Google Pay in my Capacitor app. I don’t see any plugins for Google pay. Is there a work-around for this. Could anyone help me with this? Any help would be greatly appreciated.

Thanks.

If there is no Plugin, you need to create your own.

i’m not using Capacitor but what about https://capacitor.ionicframework.com/docs/apis/browser/

code run

> ionic Cordova build android --prod --release

Error

> EPERM: operation not permitted, copyfile 'T:\ionic\T\platforms\android\platform_www\cordova-js-src\android\nativeapiprovider.js' 
> -> 'T:\ionic\T\platforms\android\app\src\main\assets\www\cordova-js-src\android\nativeapiprovider.js'

Just because you can doesn’t mean you should. While this seems convenient at first, it has a (for me, anyway) showstopper downside. Ordinary services can be easily mocked out by:

providers: [
  {provide: SomeService, useClass: SomeMock}
]

This becomes impossible when you use providedIn.

Follow the documentation for whatever library you’re using. If what you are doing here works, it’s likely that you are importing a module that indirectly provides WsmanagerService.

Try reading this thread.

Incidentally, you don’t need asObservable.

getDevs(): Observable<DriversList[]> {
  return this.driver;
}

…should do the same thing just fine.

Thanks!

In the meanwhile I made progress on my own . I now can render my markdown, including images, using require.context (which turns out to be part of Ionic after all). Here’s my code:

import React, { useState, useEffect } from 'react';
import { IonContent } from '@ionic/react';
import './Home.css';
import ReactMarkdown from 'react-markdown';

// utilitary function to create a dictionary of packaged files 
// based on the output of require.context()
const importAll = (r: any, cache: {[key: string]: string}) => r.keys().forEach(
  (key: string) => cache[key] = r(key)
);

// create a dictionary of packaged markdownfiles, by './<source filename>'
const markdownFiles: {[key: string]: string} = {};
importAll(
  require.context('../data/markdown/', true, /\.markdown$/),
  markdownFiles
);
// create a dictionary of packaged image files, by './<source filename>'
const imageFiles: {[key: string]: string} = {};
importAll(
  require.context('../images/', true, /\.(png|gif|jpg)$/),
  imageFiles
);

// utilitary function to convert './<source filename>' to '<packaged filename>'
const transformImageUri = (uri: string) => imageFiles[uri];

function Home () {
 
  // state is a dictionary of the markdown content, by './<source filename>'
  const [markdownCache, setMarkdownCache] = useState<{[key: string]: string}>({});

  // fetch the content of the markdown files and store it as state
  useEffect(() => {
    let cache: {[key: string]: string} = {};
    function fetchMarkdown() {
      let promises = Object.keys(markdownFiles)
        .map(async (markdownFile: string) => {
          let markdownResponse = await fetch(markdownFiles[markdownFile]);
          return markdownResponse.text().then(text => { 
            cache[markdownFile] = text;
          });
      });
      return Promise.all(promises);
    }
    fetchMarkdown().then(() => { 
      setMarkdownCache(cache);
    });
  }, []);
  
  return (
    <IonContent>
      {/* render all markdown files; note that the image file 
          uri's must be in the form './<source filename>', 
          regardless the relative path in the source tree */}
      {Object.keys(markdownCache).map((markdownFile, index: number) => (
          <ReactMarkdown 
            key={index} 
            transformImageUri={transformImageUri} 
            source={markdownCache[markdownFile].replace(/\\n/g, "\n")} 
            escapeHtml={false}
          />
      ))}
    </IonContent>
  );
};

export default Home;

It may be made more concise and making more elegant use of arrow-functions and await async, but I’ve only very recently developing my javascript skills to newer standards…

I think I will be creating my own custom markdown component, which will have the fetching on board, so I don’t need the global cache dictionary, and use that component in a navigation skeleton built of some fancy off-the-shelf react components.

Best regards,
Vic

I have a button with an image inside, the image source is linked to a variable through Angular binding. This variable is changed through an Observable, shared between the page and a component through a service. My problem is that when this variable is changed, there is an evident delay for the image update.

I already tried to add these changes into an NgZone, as suggested here, but the situation was the same.

page.html

<ion-button (click)="randomFunction()">
    <img [src]="'assets/images/' + buttonImage + '.png'">
</ion-button>

page.ts

this.buttonImageSubscription = this.randomService.buttonImageObservable.subscribe(status => {
	if (status === true) {
		this.buttonImage = 'image1';
	} else {
		this.buttonImage = 'image2';
	}
});

If I interact with the page, the image is updated, otherwise the image will remain static (previous value) until something in the page is changed or received from non related functions. From the log I can see that the variable value is updated, but the image in the button not.

What could be causing this problem?

I had to look for the fonts that supported this specific icon, here is a list. Then I imported though app.components.scss, in variables.scss it was not recognized:

@font-face {
  font-family: AppFont;
  src: url("/assets/fonts/FreeMono.ttf");
}
span {
  font-family: "AppFont" !important;
}

Hi,
thank you for your solution.
I’ve seen that you can solve the problem also changing the android-minSdkVersion,

I changed from 19;

<preference name="android-minSdkVersion" value="19" />

to 21 and solved the problem:
<preference name="android-minSdkVersion" value="21" />

cld

Hi, everyone.

Wanted to start new project on Capacitor since ionic trying to “Sale” it everywhere, but even on tabs starter Capacitor loading like 3 times slower than Cordova on android, tested on different devices.

Just wondering is it only my problem?

Because its kind complicate to make some mistake on this very basic level of adding new app and run on device…

Be sure to actually call hide on the splash screen

https://capacitor.ionicframework.com/docs/apis/splash-screen

Otherwise, the default timeout will be set.
We also print this out it the console of the Native IDEs.

Hand to tell from just this. can you share a more complete example?

Cant really tell what the issue is from that.

Try rm -rf node_modules and then reinstalling things?
Can you recreate this in a sample project?