@halbertn wrote:

Hello,
I’m having problems hitting my breakpoints in an ionic v4 webapp when debugging it using Chrome’s developer tools. After I first launch the app by running ‘ionic serve’, I am able to set and hit breakpoints in my code. However, if I modify that code and utilize Live reload to re-compile and reload the Chrome browser, I will no longer break into that code. The changes are reflected in the webapp, and the debugger is showing the new code, so I know that live reload is working. However, my breakpoints set in that code no longer work. I must kill and rerun ‘ionic serve’ to be able to break into the code.

To setup debugging, I have added "sourceMap":true under the compilerOptions in tsconfig.json

Thank you for your help

PS. one work around is to use the debugger statement in javascript. I can update my code, add a debugger statement, and during the execution of that code, chrome will break at that statement.

Posts: 1

Participants: 1

Read full topic

@informatik_tirol wrote:

Hi. Input focus scroll assist on iOS is borken since IONIC version 4.9.
Here the issue on github: https://github.com/ionic-team/ionic/issues/19589
I created a new project with 5.0.4, input focus scroll assist does not work as well.
Here you can find a video an source code: https://github.com/ionic-team/ionic/issues/19589#issuecomment-596056410

Has anyone of you brought that up and running with scroll assist? For me it is not usable without scroll assist, i have to use IONIC 4.8.1 until the bug gets resolved…

THX

Posts: 1

Participants: 1

Read full topic

@barrymamadoukorka wrote:

I have zone problème un firestore . i want to do a join from to collection like.
this.afs.collection(“users”).joint(“comment”) can you help me please ?

Posts: 1

Participants: 1

Read full topic

@karthis668synamen wrote:

hi…guys ,when i use ion-infinite-scroll the loaded data will be pushed to top,usually the loaded data pushed bottom side ,but mine happed opposite side help me…!

Screenshot from 2020-03-07 16-49-08|690x387

Screenshot from 2020-03-07 16-42-221366×768 204 KB

Posts: 1

Participants: 1

Read full topic

@LucasEz wrote:

Hi, How can i solve this problem?

this happened after adding FCM and ABmob to my project

Error:

error1344×438 36.7 KB

Gradle sync failed: In project ‘app’ a resolved Google Play services library dependency depends on another at an exact version (e.g. “[11.0.
4]”, but isn’t being resolved to that version. Behavior exhibited by the library will be unknown.
Dependency failing: com.google.android.gms:play-services-clearcut:11.0.4 -> com.google.android.gms:play-services-tasks@[
11.0.4], but play-services-tasks version was 16.0.1.
The following dependencies are project dependencies that are direct or have transitive dependencies that lead to the art
ifact with the issue.
– Project ‘app’ depends onto com.google.firebase:firebase-common@{strictly 17.0.0}
– Project ‘app’ depends onto com.google.android.gms:play-services-tasks@{strictly 16.0.1}
– Project ‘app’ depends onto com.google.firebase:firebase-iid@{strictly 18.0.0}
– Project ‘app’ depends onto com.google.android.gms:play-services-ads@{strictly 11.0.4}
– Project ‘app’ depends onto com.google.android.gms:play-services-safetynet@{strictl… (show balloon)

Posts: 1

Participants: 1

Read full topic

@MrMike wrote:

When starting a project with “ionic start” I see some error messages (Warnings actually) most of them are about skipping optional dependencies:

Even some of them mention to install them manually
https://pastebin.com/UVpnTniJ

But a few of them seem more important as they mention deprecated libraries.

npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

Right after that I see a line that says

> core-js@3.6.4 postinstall C:\Personal\Ionic\themappr\node_modules\@angular-devkit\build-angular\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Why it says 3.6.4 there? Does that means it updated itself or what?

And finally during the installation I also see errors (warnings) like this.

> git.exe init
Initialized empty Git repository in C:/Personal/Ionic/themappr/.git/
> git.exe add -A
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in browserslist.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in capacitor.config.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in ionic.config.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/home/home.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/home/home.page.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/home/home.page.scss.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/home/home.page.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/home/home.page.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/assets/shapes.svg.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/global.scss.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/theme/variables.scss.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/zone-flags.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory

Is this how a normal installation goes, or something is completely broken here?

Posts: 1

Participants: 1

Read full topic

@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. The canvas draws, the attibution shows, the -/+ for zoom shows, but the tiles for the map wont load, it just shows a gray background.

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

@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

@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

@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

@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

Apparently I should not have IonRouterOutlet in IonRouterOutlet as warned here https://ionicframework.com/docs/react/navigation.

So how can I achieve something like show a login page then when login direct user to tabs page?

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

@YXUN wrote:

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

Posts: 1

Participants: 1

Read full topic

@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

@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:

Posts: 1

Participants: 1

Read full topic

@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

@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

@mfragale wrote:

Ionic version:

4.x

Current behavior:

Trying to upload my ANDROID KEYSTORE at https://dashboard.ionicframework.com/app/aea1c241/build/certs but get this error:

There was an error while submitting your credentials. Invalid keystore file. The file is not a valid keystore.

Expected behavior:

The keystore should be uploaded.

Posts: 1

Participants: 1

Read full topic

@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

@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__19824663871×1884 59.1 KB

Posts: 1

Participants: 1

Read full topic

@raisadr wrote:

I don’t know the exact error, all I know I already put the right URL.
Here is the error I’ve got

image1920×1080 336 KB

and here is my tabs.module.ts

image1920×1080 267 KB

Posts: 1

Participants: 1

Read full topic