I have an HTML and a JS, my html have ionic components is very simple, how can I build my apk from that?

1 post - 1 participant

Read full topic

I’m doing some logic based on the URL params on tab change

I have set params in route under children

//router/index.js
path: 'tab3/:action/:value', 

If tab3 is manually switched by clicking tab buttons do nothing
if tab3 change using vue router.push() or replace() get the params and do some logic

but unfortunately im getting error when I manually change the tab
**

No match found for location with path “/tabs/tab3”

**

tab change works with this code router.replace('/tabs/tab3/add/USA'); if I go back to other tab and switch again to tab3 manually the url params persist in the url, so my logic not working

import { createRouter, createWebHistory } from '@ionic/vue-router';
import Tabs from '../views/Tabs.vue'
const routes = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/tabs',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: '/tabs/tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3/:action/:value',     // params for tab3 route
        component: () => import('@/views/Tab3.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router


//  Tab1.vue

<script>
import { useRouter } from "vue-router";
  setup() {
    const router = useRouter();

      moveToTab3(){
       router.replace('/tabs/tab3/add/USA');
      }
 }
  
</script>


// Tabs3.vue

 if (route.params.action === "add") {
    // tab change using router
   // console.log(route.params.value)
}else{
  // tab change manually
 // do nothing
}

2 posts - 1 participant

Read full topic

How can I change the size of cancel button in ion-searchbar?

1 post - 1 participant

Read full topic

I did try to use the angular youTube player library in ionic 5. It did work like expected on Android, but do not show on ios.

Does somebody had the same problem and know how to fix it?

This is my code

// component.html
<youtube-player videoId="82iWIKejaiQ" width="260px" height="260px"></youtube-player>

// module.ts
import { YouTubePlayerModule } from '@angular/youtube-player'

imports [
    CommonModule,
    IonicModule,
    YouTubePlayerModule,
]

// component.ts

export class YouTubeComponent implements OnInit {
  ngOnInit(): void {
    loadScript('https://www.youtube.com/iframe_api')
  }
}

// utilities.ts 
export const loadScript = (target: string): void => {
  if (!isScriptLoaded(target)) {
    const tag = document.createElement('script')
    tag.src = target
    document.body.appendChild(tag)
  }
}

const isScriptLoaded = (target: string): boolean => {
  return document.querySelector('script[src="' + target + '"]') ? true : false
}

1 post - 1 participant

Read full topic

Hi there,

I find a strange thing in the prod build report of tutorial-photo-gallery-vue sample. All ionic components used in this sample are registrated as local components, so I think for those unused ionic components, they will NOT included in the build. But when I build the sample with vue-cli-service build --report and open the report.html, I find some unused ionic components (ion-slider, swiper, ion-datetime, etc.):

image1085×897 208 KB

Is this the right behavior? Or I missed something? Many thanks for any help.

1 post - 1 participant

Read full topic

I am building a simple map app with Vue, Leaflet and Ionic. I want to have a fixed button with an icon on it. I am using ion-fab in combination with ion-icon. But whatever I try, the icon is not visible on the button. Hope someone can tell me what I am doing wrong.

The vue component (Menubar.vue):

<template >
  <!-- fab placed to the top end -->
  <ion-fab vertical="top" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>  
  </ion-fab>
</template>

<script>
import { IonFab, IonFabButton, IonIcon } from "@ionic/vue";
import { eventHub } from "../main";
import { add } from "ionicons/icons";


export default {
  components: {
    IonFab,
    IonFabButton,
    IonIcon,
  },

  methods: {
    reCenter() {
      console.log("Emitted reCenter");
      eventHub.emit("reCenter");
    },

    startAdd() {
      console.log("Emitted startAdd");
      eventHub.emit("startAdd");
    },
  },

  setup() {
    return {
      add,
    };
  },
};
</script>

My App.vue:

<template>
  <ion-app>
    <ion-content>
    
    <!-- <ion-router-outlet /> -->
    <front-page :bankjes="bankjes" v-if="dataReceived"></front-page>

    <menu-bar />
    </ion-content>
  </ion-app>
</template>

<script >
// import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { IonApp,IonContent } from "@ionic/vue";
import { defineComponent } from "vue";
import FrontPage from "./components/FrontPage";
import MenuBar from "./components/MenuBar.vue";


const axios = require("axios");

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    // IonRouterOutlet,
    FrontPage,
    MenuBar,
    IonContent
  },
  
  data() {
    return {
      bankjes: null,
      dataReceived: false,
    };
  },

  mounted() {
    this.refreshDataFromServer();
  },

  methods: {
    refreshDataFromServer() {
      axios.get("http://localhost:3000/bankjes").then((response) => {
        this.bankjes = response.data;
        this.dataReceived = true;
      });
    },
  },
});
</script>

2 posts - 1 participant

Read full topic

I was using the Object.keys to push all my object’s key into the array, it test well in the browser ( Ionic serve --lab), but after ionic cordova build, Object.keys just return a empty array to me, and it seems very weird.

As you can see the Object.keys only return an empty array which expect to return a two length array.

Even I use the for…in or Object.entires function, still no any return, so confused…

I don’t think this is the tsconfig.json problem because I had edit the lib property

"lib": ["es2018", "dom", "es2017.object"]

Can anyone help to figure out how to fixed this problem ?

1 post - 1 participant

Read full topic

Hello, I’m creating a PWA using Ionic but I cant build it for prod.

   Ionic CLI                     : 5.4.16 
   Ionic Framework               : @ionic/angular 5.6.6
   @angular-devkit/build-angular : 0.1102.13
   @angular-devkit/schematics    : 11.2.13
   @angular/cli                  : 11.2.13
   @ionic/angular-toolkit        : 3.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.13.0
   npm    : 6.4.1
   OS     : macOS Catalina

ionic build --prod

It logs errors regarding ionic templates
For example:

1 post - 1 participant

Read full topic

I started out with Ionic using React (don’t even bother) and had an IonSplitPane working in that project. I escaped to Angular and started a new tabbed app and typed in my split pane elements just as I had them on React but I get a cryptic error:

image906×709 23.7 KB

I have tried using the syntax from the documentation and have scoured the internet looking for a solution to this error. No matter how I define content, contentId, or whatever and match up the ID with my menu and main content the split-pane just blows up. I’m happy to cobble together my own split-pane master/detail component but it would be nice if this worked or was at least removed from the docs. I’m on all the latest default framework versions…whatever comes with “ionic start.”

1 post - 1 participant

Read full topic

I need to rebuild a old ionic 3 app but during compile I receive some errors:

In order to complete install, I have ignored script

npm install --ignore-scripts

gyp verb `which` succeeded python C:\Python39\python.EXE
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                       ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:308:12)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at maybeClose (internal/child_process.js:1048:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
gyp ERR! System Windows_NT 10.0.19042
gyp ERR! command "C:\\tools\\nodejs\\node.exe" "C:\\projects\\mgdlab\\ionic\\cartograph-app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\projects\mgdlab\ionic\cartograph-app\node_modules\node-sass
gyp ERR! node -v v14.16.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok

ionic serve

> ionic-app-scripts.cmd serve --address localhost --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser
[app-scripts] C:\projects\mgdlab\ionic\cartograph-app\node_modules\node-sass\lib\binding.js:13
[app-scripts]       throw new Error(errors.unsupportedEnvironment());
[app-scripts]       ^
[app-scripts] Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)
[app-scripts] For more information on which environments are supported please see:
[app-scripts] https://github.com/sass/node-sass/releases/tag/v4.13.1
[app-scripts]     at module.exports (C:\projects\mgdlab\ionic\cartograph-app\node_modules\node-sass\lib\binding.js:13:13)
[app-scripts]     at Object.<anonymous> (C:\projects\mgdlab\ionic\cartograph-app\node_modules\node-sass\lib\index.js:14:35)
[app-scripts]     at Module._compile (internal/modules/cjs/loader.js:1063:30)
[app-scripts]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
[app-scripts]     at Module.load (internal/modules/cjs/loader.js:928:32)
[app-scripts]     at Function.Module._load (internal/modules/cjs/loader.js:769:14)
[app-scripts]     at Module.require (internal/modules/cjs/loader.js:952:19)
[app-scripts]     at require (internal/modules/cjs/helpers.js:88:18)
[app-scripts]     at Object.<anonymous> (C:\projects\mgdlab\ionic\cartograph-app\node_modules\@ionic\app-scripts\dist\core\bundle-components.js:6:16)
[app-scripts]     at Module._compile (internal/modules/cjs/loader.js:1063:30)

Probably there are not compatible release (python or others)

1 post - 1 participant

Read full topic

Hey all , I’m new to Ionic and entered the following based on the docs :
ng add @ionic/angular
it says : For adding Ionic to an already existing Angular project, use the Angular CLI’s ng add feature.

now my app does not render and only shows a listing directory with the src directory as empty. I thought by adding this it would allow me to expand on my existing app . Would someone advise me on this Thanks

1 post - 1 participant

Read full topic

I have an ionic vue tabs starter application with router configured as below, I want to disable web history for the tabs navigation.

Issue : Change the tabs using tab button and press the device back button, the app will navigate back to previous tab.

Expectation : changing the tas should not create web history. On pressing the device back button, it should not go back to web history.

import { createRouter, createWebHistory } from '@ionic/vue-router';

import Tabs from '../views/Tabs.vue'

const routes = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/tabs',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: '/tabs/tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        name:'tab3',
        component: () => import('@/views/Tab3.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3 posts - 2 participants

Read full topic

After 24 May mac update for Big Sur (11.4), the web inspector only shows Console, Sources, and Audit tab. The Console tab doesn’t show any from the app, it’s always empty. Source Tab doesn’t show the app code anymore. Tried to clean up Safari Cache, also have tried Safari Technology Preview, and none of this worked, still the same annoying thing. Anyone here has experienced something like it?

Env:

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 4.11.13
   @angular-devkit/build-angular : 0.803.29
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 21 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.14.0
   native-run (update available: 1.3.0)   : 1.0.0

System:

   Android SDK Tools : 26.1.1 
   ios-sim           : 8.0.2
   NodeJS            : v10.16.3
   npm               : 6.9.0
   OS                : macOS Big Sur
   Xcode             : Xcode 12.5 Build version 12E262

2 posts - 1 participant

Read full topic

I’m having trouble with the ionic flashlight plugin for Cordova on iOS, it works fine on android.

If I create a button and do the following simple switch off:

this.torch.switchOff().then(r=>{
console.log(“TURNED OFF”)
})

The promise comes back fine and it logs TURNED OFF. The problem is it doesn’t turn the flashlight off on my iPhone if I turned it on via the phone pull down menu.

If I create a button in the app and do:

this.torch.switchOn().then(r=>{
console.log(“TURNED ON”)
})

This turns the torch on, and the off button turns it off, it’s when I turn the light on via the pull down menu then press the off button in the app, nothing happens (the light does not turn off). It’s almost as though the built in button on the iPhone uses a different way to turn the torch on and off.

In fact I also noticed that if I turn the torch on via the app the actual torch button on my phone becomes disabled, it’s like it’s using totally different methods.

3 posts - 2 participants

Read full topic

I got just the react sample.

Could someone share with me how to use with vue js? I would like to put my wordpress site in an app via inAppBrowser.

4 posts - 3 participants

Read full topic

This is a question about this page: Geolocation | W3C Geolocator Application API Plugin.

The documentation says:

For iOS you have to add this configuration to your **configuration.xml** file

<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
   <string>We use your location for full functionality of certain app features.</string>
</edit-config>

However, there is no configuration.xml. There’s a config.xml, and I assume that’s what is being referred to, but currently there are no <edit-config> tags in my config.xml, so I want to make sure I’m putting things in the right place. Should I be modifying config.xml?

(Also note, in the iOS simulator, this feature seems to work even without modifying a config/configuration file. I’m not sure if that’s expected.)

Also note that the config.xml file appears to be overwritten whenever I run ionic cap sync, if that’s even the right file to modify.

4 posts - 2 participants

Read full topic

Hi all,

I added the Custom Url Scheme plugin (GitHub - EddyVerbruggen/Custom-URL-scheme: Launch your Cordova/PhoneGap app by a Custom URL scheme like mycoolapp://) to my app and now I am trying to pass data from a webpage to my app. Calling mycoolapp://any/path opens the app, but how can I get data?
The manual says one should implement the handleOpenURL function, but where? In which file, class, module? Did anyone get this working?
My app is on Ionic 5, Angular and Cordova.

3 posts - 2 participants

Read full topic

I have an Ionic React app and I want to use the Capacitor Keyboard plugin on my login screen.

My code looks something like this:

import { Keyboard } from '@capacitor/keyboard';

...MyComponent
  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);

  Keyboard.addListener('keyboardWillShow', (info) => {
    console.log('keyboard will show with height:', info.keyboardHeight);
    setIsKeyboardVisible(true);
  });
  Keyboard.addListener('keyboardDidHide', () => {
    console.log('keyboard will hide');
    setIsKeyboardVisible(false);
  });

          {!isKeyboardVisible && (
            <ButtonLanguageChanger />
          )}

This crashes my app on the web:

util.js:21 Uncaught (in promise) Error: "Keyboard" plugin is not implemented on web
    at createPluginMethod (runtime.js:70)
    at runtime.js:77

I understand that the Keyboard plugin doesn’t work on the web, but what’s the best practice for importing such plugins in React? (I want to use it on mobile, and just ignore it on the web.)

2 posts - 1 participant

Read full topic

Hi, I’ve been fiddling with my React Ionic(Ionic v 5.6.7) project trying to get it to proxy my backend server so I can avoid CORS issues.

My problem is that it seems that the proxies config in the ionic.config.json file seems not to cause any proxying. Here’s the relevant section in the file:

  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://localhost:8000/api"
    },
    {
      "path": "/login_app",
      "proxyUrl": "http://localhost:8000/login_app"
    }
  ]

This does not get triggered when I run yarn start or ionic serve.

What I did manage to get working was just setting the “proxy” field in the package.json file, but I’m not sure if this is due to functionality within create-react-app more than something that is ionic specific. Also, should it be possible to configure the proxy in the setupProxy.js file when working in dev?

Thanks for any input

• Tarjei

1 post - 1 participant

Read full topic

When I navigate to different routes in ion-tabs in Ionic Vue, the scroll positions for the pages are preserved from the previous times I viewed them. Instead I’d like pages to automatically be scrolled to the top when navigated to.

I’m using the default tabs starter template and have tried modifying router/index.ts as instructed in the Vue Router documentation to no success.

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior() {
    // always scroll to top
    return { top: 0 }
  },
})

… and with the following quick edit to ExploreContainer.vue to make the page scrollable:

#container {
  text-align: center;
  height: 150vh;
}

Much appreciation for any help!

1 post - 1 participant

Read full topic