Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70417 articles
Browse latest View live
↧

Any "official" guide on how to add leaflet to ionic and get it working for Android?

March 7, 2020, 8:42 am
$
0
0

@MrMike wrote:

So I’m trying to add a leaflet map to a project. While I get everything to work when using ionic serve to visualize it on the browser, when I do ionic capacitor run android No map will show on the Android Studio Virtual Device.

I have created a new blank project. On index.html I have added the links to leaflet css and js.
On home.page.html I added container for my map.

  <div id="container">
    <div id="myMapContainer">
      <div id="myMap"></div>
    </div>
  </div>

with simple css

#myMapContainer {
  width: 100vw;
  height: calc(100vh - 56px);
  margin-top: 56px;
  background-color: cornflowerblue;
}

#myMap {
  width: 100vw;
  height: 100%;
}

Then on home.page.ts I added few lines of code

ngOnInit() {
    let myMap = L.map("myMap").setView([51.505, -0.09], 13);
    let aMap = new L.tileLayer(
      "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
      {
        attribution:
          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
      }
    );
    aMap.addTo(myMap);
    setTimeout(() => {
      myMap.invalidateSize();
    }, 10);
    myMap.on("dragend", event => {
      myMap.invalidateSize();
    });
  }

I also added a declare const L; so it doesn’t complain about not knowing what L is.

While all this works on browser, it wont work on Android Studio.

Anyone has any idea why this could be happening?

If someone interested I guess I could upload the full src somewhere. Thanks a lot in advance.

Posts: 1

Participants: 1

Read full topic

↧
Search

Ionic 4 Nodejs Server

March 7, 2020, 10:30 am
$
0
0

@franciscocab wrote:

Hi, I have a nodejs server running in a local environment. Customers connect via Wi-Fi connection. My problem is the ip address, I want the ip to be dynamic, automatically. Localhost knows that it doesn’t work, only through the fixed ipv4 (192.168.X.XX). Any solution? I tried everything.

Posts: 1

Participants: 1

Read full topic

↧

How to accept SDK license agreement to run Ionic app on Android device?

March 7, 2020, 12:07 pm
$
0
0

@Sweg wrote:

I am trying to run an ionic app on my android device by running ionic cordova run android, but I’m getting this error message:

BUILD FAILED in 1s
cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.

  • What went wrong:
    A problem occurred configuring root project ‘android’.

You have not accepted the license agreements of the following SDK components:
[Android SDK Platform 26].
Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

Here are my system variables:

var1
var11022×220 8.94 KB

And here is my Path variable:

var2

I saw one solution someone suggested online was to execute this command:

%ANDROID_HOME%/tools/bin/sdkmanager --licenses

However, as you can see below, there is no tools folder where my SDK is located:

var3
var3941×651 37.2 KB

Can someone please tell me what I’m doing wrong, & how I can resolve this issue?

Posts: 1

Participants: 1

Read full topic

↧

ionic 4 can't use “ionic package build ios development”

March 7, 2020, 12:43 pm
$
0
0

@dapidodev wrote:

I try to read but i can’t understand the docs about ionic 4, Can we build ios app with windows using ’ ionic package build ios '?

I try to build ios app with ionic 4 using ’ ionic package build ios ’

ionic package build ios
Build type: development

[WARN] A security profile is mandatory to build an iOS package
Security Profile Name: project_1
[ERROR] An error occurred while running git.exe rev-parse HEAD (exit code 128)

I try to install Git using Git-2.25.1-64-bit.exe and the problem still exist…

I don’t know where to post my problem, maybe somebody can help my problem.

Posts: 1

Participants: 1

Read full topic

↧

Does Capacitor have a command to generate resources as cordova resources do?

March 7, 2020, 5:37 pm
$
0
0

@Radecom wrote:

I have worked very well with Ionic Cordova for more than 3 years and their commands save you a lot of time, for example, the ionic cordova resources does an excellent job.
Now, the Ionic CLI insists that you use a better Capacitor for the native work of your application.
I accepted and it’s a mess, for example, I can’t find a quick way to generate the resources I need.
Currently, I do not believe that Capacitor is competition, it does not come close to cordova.
Does anyone use it? Does anyone know a way to do it fast?

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic 4, Background image opacity

March 7, 2020, 11:17 pm
$
0
0

@TaimoorMughal wrote:

I’m working on an app in which i’m getting images from API. Using that api i’m changing my apps background image:

<ion-content [ngStyle]="{'background-image': 'url(' + img1+ '),url(' + img2+ ')'}"
[style.background-size]="'100% 50%, 100% 50%'" [style.background-repeat]="'no-repeat, repeat'">

As images are too bright so i want to set the background image opacity, as i change opacity in content it sets the opacity of whole page. Is there a way to set the opacity of only image?

Thank you.

Posts: 1

Participants: 1

Read full topic

↧

Does having two IonRouterOutlet make sense? One for pages one for tabs

March 7, 2020, 11:23 pm
$
0
0

@xiaokidz1990 wrote:

So I what I trying to do is to set up two IonRouterOutlet

Login, Register and Tabs in one IonRouterOutlet

Tab1, Tab2 and Tab3 in another IonRouterOutlet

This way i will have tabs bar only in tabs page but not in login or register.

Works great so far except that once I added tab1Details and try to goBack it shows blank page. Same thing happens when I refresh.
Direct visit to ‘tab1’, ‘tab2’, ‘tab3’, ‘tab1Details’ all blank.
‘tabs’->‘tab1’ works ok
'tabs->‘tab1’->‘tab1Details’->‘tab1’ (by goBack) blank

I think I might messed up react router setting and maybe I should not have IonRouterOutlet wrong.

Any help will be appreciated.

App.tsx

<IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/" render={() => <Redirect to="/login" />} exact={true} />
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
      </IonRouterOutlet>
      <Route path="/tabs" component={Tabs} />
    </IonReactRouter>
  </IonApp>

Tabs.tsx

<IonReactRouter>
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/tab1" component={Tab1} exact={true} />
        <Route path="/tab1Details" component={Tab1Details} />
        <Route path="/tab2" component={Tab2} exact={true} />
        <Route path="/tab3" component={Tab3} />
        <Route
          path="/tabs"
          render={() => <Redirect to="/tab1" />}
          exact={true}
        />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        {tabs.map(({ name, route, icon }) => (
          <IonTabButton tab={name} href={route}>
            <IonIcon icon={icon} />
            <IonLabel>{name}</IonLabel>
          </IonTabButton>
        ))}
      </IonTabBar>
    </IonTabs>

Posts: 1

Participants: 1

Read full topic

↧

How to close ion-menu after pressing a button redirecting to a new page?

March 8, 2020, 5:18 am
$
0
0

@YXUN wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

↧
Search

Generating an Ionic Angular app defaults to Angular 8

March 8, 2020, 7:28 am
$
0
0

@HannesC wrote:

When I generate a blank Ionic Angular app with the latest ionic/cli package, I get Ionic/Angular ^5.0.0 in the package.json file as expected. However the Angular packages are still ^8.x.x.

Am I doing something wrong?
And is there a guide how to migrate to Angular 9 in an ionic application?

Posts: 1

Participants: 1

Read full topic

↧
↧

Show scanner camera in some pice of page not full screen

March 8, 2020, 7:39 am
$
0
0

@leila-msc-90 wrote:

Hi guys.
I am beginner in ionic! I want to use ionic 5 for implements qr code scanner like this.
I want to show scanner camera in some pice of page not full screen.
Like bottom image:
1

Posts: 1

Participants: 1

Read full topic

↧

IONIC 4 - Cookies Ignored on First iOS app lunch

March 8, 2020, 7:45 am
$
0
0

@inside wrote:

Hello,
Cookies Ignored on First iOS app run. When luch second time app everything works ok.
is there any solution to fix this problem ?
I using ionic4 , cordova , angular

Posts: 1

Participants: 1

Read full topic

↧

Ionic 4: Failed facebook login with android 9.0, How to implement a solution?

March 8, 2020, 8:45 am
$
0
0

@feliperiverot wrote:

I am working in an app using Ionic 4. One of the requeriments is the user can log in using facebook. I follow this tutorial: login facebook and works almost perfectly the functionality.

But testing the app I found out this: facebook login works good in all the android versions except with android 9.0

Always give me this error: “There is an error in logging you into this application. Please try again later”

enter image description here

Doing research I found the following issue:

“That’s happens because since Android Pie (9.0), you cannot make non secure http requests. Starting with Android 9 (API level 28), cleartext support is disabled by default.”

So I continued with the research and I find several solutions:

Ionic 4 app Login problem in Android Pie (9.0)

Ionic 4 Android 9.0 Login failed

Android 8: Cleartext HTTP traffic not permitted

As is commented in the previous answers, I tried to do the following

in config.xml file that is located in the root folder of the project i added:

android:usesCleartextTraffic="true"  // to allow clear text traffic

android:targetSandboxVersion="1"  // to recude level of securtiy


   <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" android:targetSandboxVersion="1" android:usesCleartextTraffic="true" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />

And did not work. Then I tried the second option. I searched in the project folder for this file: “network_security_config”

<resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />

So I can implement this solution:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">api.example.com(to be adjusted)</domain>
    </domain-config>
</network-security-config>

Here is my network_security_config.xml file code:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">https://www.facebook.com/</domain>
    </domain-config>
</network-security-config>

Obviously it didn’t work. I think the issue is, i dont now which url must be here:

<domain includeSubdomains="true">https://www.facebook.com/</domain>

Any ideas how can overcome this? how to fix it?

Posts: 1

Participants: 1

Read full topic

↧

Cannot find module '@angular/core' when using cordova-plugin-file-opener2

March 8, 2020, 10:49 am
$
0
0

@vahid18u wrote:

I installed cordova-plugin-file-opener2 plugin using capacitor according to the instruction here and imported it with

import { FileOpener } from '@ionic-native/file-opener/ngx';

and no more code.
when I run it, it says:

Error: Cannot find module '@angular/core'
    at webpackMissingModule (:8100/static/js/7.chunk.js:1012)
    at Module../node_modules/@ionic-native/file-opener/ngx/index.js (:8100/static/js/7.chunk.js:1012)
    at __webpack_require__ (:8100/static/js/bundle.js:791)
    at fn (:8100/static/js/bundle.js:151)
    at Module../src/pages/calculate/calculate-component.jsx (:8100/static/js/main.chunk.js:3021)
    at __webpack_require__ (:8100/static/js/bundle.js:791)
    at fn (:8100/static/js/bundle.js:151)
    at Module../src/pages/Page.jsx (:8100/static/js/main.chunk.js:2840)
    at __webpack_require__ (:8100/static/js/bundle.js:791)
    at fn (:8100/static/js/bundle.js:151)
    at Module../src/App.jsx (:8100/static/js/main.chunk.js:648)
    at __webpack_require__ (:8100/static/js/bundle.js:791)
    at fn (:8100/static/js/bundle.js:151)
    at Module../src/index.jsx (:8100/static/js/main.chunk.js:2744)
    at __webpack_require__ (:8100/static/js/bundle.js:791)
    at fn (:8100/static/js/bundle.js:151)
    at Object.1 (:8100/static/js/main.chunk.js:3591)
    at __webpack_require__ (:8100/static/js/bundle.js:791)
    at checkDeferredModules (:8100/static/js/bundle.js:46)
    at Array.webpackJsonpCallback [as push] (:8100/static/js/bundle.js:33)
    at :8100/static/js/main.chunk.js:1

I’m using ionic 5 with react.
and actually it does not let me sync and it says:

Cannot find module: '@angular/core'. Make sure this package is installed.
You can install this package by running: npm install @angular/core.

should I install @angular/core ? why should I install angular when I don’t use it anymore?

Posts: 1

Participants: 1

Read full topic

↧
↧

Can't submit ANDROID KEYSTORE

March 8, 2020, 1:52 pm
↧

Looking to pick brains on migrating react website to ionic5/react mobile hybrid app

March 8, 2020, 5:25 pm
$
0
0

@dmitrimp wrote:

Hi All, we are considering building a hybrid app with ionic5/react by reusing our existing react website and I’m looking for people with experience in this area to pick their brains on this transition. Thinks like what went well, what didn’t go well, any learnings you’d think will help in this transition, any special considerations we should think about before going ahead with this project, etc. Any advice or contacts will be very helpful

Posts: 1

Participants: 1

Read full topic

↧
Search

PWA list isn't load text correctly ( only in IOS phone )

March 8, 2020, 9:47 pm
$
0
0

@Lshiro wrote:

i recently use pwa ionic for my project, but i found some problem in ios phone.

first problem is, my ion-list text is not load correctly
There are 6 data in the array,
and it’s already show 6 row, but text only showed in 1 top row, the last 5 row not showing the text in the array.

second is, there are 5 tabs in my app, and the first problem is in tab number 4
when i build for the first time, i still could click tab number 4, and it will redirect to another page, but when i build again, when i click tab number 4, it won’t redirect to anywhere,
i don’t change the code, just rebuild it

is there any solution for this problem,
thank you

S__19824663
S__19824663871×1884 59.1 KB

Posts: 1

Participants: 1

Read full topic

↧

Uncaught (in promise): Error: Cannot match any routes. URL Segment

March 8, 2020, 11:25 pm
↧
↧

Failed to execute 'construct' on 'CustomElementConstructor'

March 9, 2020, 1:03 am
$
0
0

@BorntraegerMarc wrote:

Related github issue: https://github.com/ionic-team/ionic/issues/20720

I’m wondering if anyone here experience the same issue? (more info in github issue)

Basically what happens is that the user receives a notification (while app is in foreground) and then he sends the app to background. After waiting for like 10-30mins he clicks on the notification (while the app is still in background; so not a cold start). By clicking on the notification we trigger a navigation command navigateForward which produces the following exception: Uncaught Error: Failed to execute 'construct' on 'CustomElementConstructor': The provided callback is no longer runnable.

Posts: 1

Participants: 1

Read full topic

↧

Ion virtual scroll rendering problwm

March 9, 2020, 1:03 am
$
0
0

@gangamathu wrote:

Hello,

I have been using virtual scroll to load my set of data, whenever from the list page if i navigate to some other page ,I could see only some of the items are getting rendered in list ,after a flicker in a second remaining items are rendered?Could any one help me with this issue.In ionic 4 i have used buffer ratio, the problem seems to be fixed in version 5 i could not able to see the buffer ratio option itself

Posts: 1

Participants: 1

Read full topic

↧

IonNav.canGoBack() sometimes throws exception: "Cannot read property 'apply' of undefined"

March 9, 2020, 1:04 am
$
0
0

@BorntraegerMarc wrote:

Related github issue: https://github.com/ionic-team/ionic/issues/20721

I was wondering if anyone here ever experienced the same issue? (more info in github issue)

Basically what happens is that the user receives a notification (while app is in foreground) and then he sends the app to background. After waiting for like 10-30mins he clicks on the notification (while the app is still in background; so not a cold start). By clicking on the notification we check whether we need to pop any existing view before showing the new one with await this.chatRoomNavService.nav.canGoBack() . This produces the following exception: vendor-es2015.js: Line 52957 : ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined

Posts: 1

Participants: 1

Read full topic

↧
Viewing all 70417 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>