Hi, I’m new to ionic, in fact I heard about it yesterday and I want to use it at work because i think it’s very cool to code once and run across all platforms.
The thing is I’m confused on how it works. I did a tutorial about ionic-react yesterday and I find it great but it did not show any server side code and that’s exactly what I’m planning to do.

In my use case I need my frontend to connect to a socket. Precisely, I have data in the cloud and i need to pull them over socket and show them at the frontend. For this I will need a server (probably node js) to pull the data over a socket and them show these data in the frontend.

Now this is confusing since the ionic app is started with the

ionic serve

command but node js server must also be started with the

npm start

command. Which one of them should run here?

Also how to deploy my app to ios or android if a node js is needed? should the entry point be ionic serve or npm start ? I assume the app will not work if the node js server is not running in the background, and how would it run on mobile!?

Should I maybe deploy the node js server in the cloud (for example in heroku) and then expose the IP adress, which I ll connect to in my frontend? or connect to the socket from my mobile? is that the right way to do it?

I’m very confused, I would appreciate it if someone can guide me on this.

4 posts - 2 participants

Read full topic

Hi there,

I’m Ali Toki from Iran and we are using the Ionic react version in our PWA’s version of a bank and we have a critical problem with Ionic and here are the problem details. Ionic version:
4.x
5.2.2
Current behavior:
Ionic react loads its assets by using jsdelivr CDN that our application can’t run without the internet. Keep in mind that our clients should have a VPN connection to see the cdn.jsdelivr.net , Now, this bug goes to be a critical problem for us and we don’t know what should we do!!!
Expected behavior:
Ionic react should load all its dependencies locally, not by using CDN.
CDN URL:

https://cdn.jsdelivr.net/npm/@ionic/core@5.2.2/dist/ionic/ionic.esm.js

And also

https://cdn.jsdelivr.net/npm/@ionic/core@5.2.2/dist/ionic/ionic.js

Is there anybody here to help me? I really need your help and I appreciate it.

1 post - 1 participant

Read full topic

I have an Ionic 5 App that relies heavily on Ionic local storage, a lot of the data needs to be available offline, this data can then be read and updated within the App, then saved in Ionic local storage and also sent back to the server using an API (although this part is irrelevant to this problem).

The data (in this case the “items”) often contain images that are stored as Base64, therefore making the size of data and the resulting JSON string quite large.

I seem to have issues with some users where the Ionic app can crash and restart on iOS which I believe is because of the amount of data being read into memory from local storage.

Currently, the “items” are stored in local storage using the following code:

this.storage.set('items', items);

Then when a single item needs to be updated I have to do something like the following:

  setItem(itemId, item: Item) {

    return this.getItems().pipe(
      map((items: any[]) => {

        // Find by itemID
        let index = items.findIndex((i) => i.ItemId === itemId);

        // If cannot find item then add it to array, otherwise update it in the array
        if (index === -1) {
          items.push(item);
        } else {
          items[index] = item;
        }

        // Update items in local storage
        this.storage.set('items', items);

        return item;
      })
    );
  }

  // Get items from local storage
  getItems(): Observable<Item[]> {
    return from(this.storage.ready().then(() => {
      return this.storage.get('items').then((items) => {
        return items;
      });
    }));
  }

Having come from a SQL Server background this seems very inefficient having to load all “items” into memory and out of the database just to update one of them and I can understand why the App might crash if there is a large amount of data being pulled into memory.

Is there a better way to be doing this? I have seen Ionic offer something called “Ionic Offline Storage” but there is very little information on this and I guess it must be something you have to pay for and likely expensive as they do not show any pricing for this on their website, just a form where you have to contact them for more details (I always get suspicious when companies do this).

To be honest I do not mind paying for a solution if there is a better one available and the cost is reasonable. Does anyone have any better solutions for doing something like this, is there a way to use Ionic storage without loading everything into memory each time you want to update one item or another local database solution that can be used which handles this more efficiently?

1 post - 1 participant

Read full topic

I’m trying to use the ionic segment as a tab but because it has a aria-pressed attribute in it when I give role=" tab", Talkback first announces it like tab and then as toggle button because it has aria-pressed in it, is there any way I can remove it (aria-pressed) from ion-segment-button?

1 post - 1 participant

Read full topic

I have developed an application for a radio station that needs to have live streaming. I used the streamingmedia plugin, when I tap the button to play the streaming, it opens the player and then comes back to the menu and does not play the streaming.
The app is working fine with Android lower than 9, but it does not work with Android 9 and higher.

1 post - 1 participant

Read full topic

Hi all,

I’d like to question something regarding the order of elements in a list when using virtual scroll. I’m not sure whether it’s a bug or I am doing something wrong.

If you have a virtual list like this:

<ion-virtual-scroll
  [items]="filteredEmployees"
  approxItemHeight="48px"
  [trackBy]="trackByEmployeeId"
>
  <ion-item *virtualItem="let employee">
    <ion-label>{{ employee.name }}</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>
</ion-virtual-scroll>

everything works as expected. Notice that each item is a clickable form element. But when you scroll a bit, and the list items are added/removed dynamically, it messes up the order of them in the DOM and navigating using the keyboard (tab key) doesn’t work as expected.

Let’s say that when pressing the tab key you expect the items to be selected in the natural top-to-bottom order:

…
33
34
35
36
37
…

but the actual order is shuffled:

…
33
36
37
34
35
…

Is this a bug or am I missing something? Has anybody else noticed and experienced this issue?

Looking very much for any response.

   Ionic CLI                     : 6.10.1 (C:\Users\joskr\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.1000.2
   @angular-devkit/schematics    : 10.0.2
   @angular/cli                  : 10.0.2
   @ionic/angular-toolkit        : 2.2.0

1 post - 1 participant

Read full topic

My ionic application starts flickering black screen when video enters into the screen. I’m using html5 video tag in ionic 4. Any help would be great Thanks in advance.

video link of the issue : https://lh3.googleusercontent.com/XL-mNnKdyqfjaSX41cRokvJe6_O02b72eEbc6Bz7tWQc4Qz8Qimx94eC8x4sRRz7nWccN56crwsSKA=m37

Ionic:

Ionic CLI : 5.4.6 (C:\Users\TRIO\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.8
@angular-devkit/build-angular : 0.801.3
@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 : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 4.1.3, (and 22 other plugins)

Utility:

cordova-res : 0.8.1
native-run : 0.2.9 (update available: 0.3.0)

System:

Android SDK Tools : 26.1.1 (C:\Users\TRIO\AppData\Local\Android\Sdk)
NodeJS : v12.11.1 (C:\Program Files\nodejs\node.exe)
npm : 6.11.3
OS : Windows 10

1 post - 1 participant

Read full topic

Hi ,

I would like to run a service even after app terminate or close.
App should communicate with our server for every 20 minutes (Even after close the app)

1 post - 1 participant

Read full topic

I am trying to use compare with function with multiple selection in ionic 5.
Binding is working properly, but when I open the options alert there is nothing selected, even if the selected values result correct in the object.
If I use single select this works correctly, but with multiple selection the selected values are not checked in the alert.
Here is my html code:

And this is my compareWith function (that works according to logs that I’ve checked):
compareWithFn = (o1, o2) => { return o1 && o2 ? o1.id === o2.id : o1 === o2; }

Anyone has idea why this is happening?

Thanks

1 post - 1 participant

Read full topic

Hi i am using Ionic v4 to develop IOS app, days ago i could compile and generate Xcode project without problems, after run command ionic cordova prepare ios a message “Build success” was shown, today this message is not shown, only warnings (i have these before), i only change some variables and styles, i dont add any plugin.
After running the command it generate a xcode project but with a lot of errors ( the most of them related with ARC). Should i need to update my plugins ? i have tried to remove and add ios platform.

The output of the command is the following:

Warning: Entry point 'angular-cropperjs' contains deep imports into '/Users/luisalbertojuarez/Documents/ionic-projects/entersl/node_modules/cropperjs/dist/cropper'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

Generating ES5 bundles for differential loading...

ES5 bundle generation complete.

chunk { **polyfills** } **polyfills-es2015.js, polyfills-es2015.js.map** (polyfills) 268 kB **[initial]** **[rendered]**

chunk { **polyfills-es5** } **polyfills-es5.js, polyfills-es5.js.map** (polyfills-es5) 704 kB **[initial]** **[rendered]**

chunk { **2** } **2-es2015.js, 2-es2015.js.map** () 44.5 kB  **[rendered]**

chunk { **2** } **2-es5.js, 2-es5.js.map** () 51.6 kB  **[rendered]**

chunk { **0** } **0-es2015.js, 0-es2015.js.map** () 29.2 kB  **[rendered]**

chunk { **0** } **0-es5.js, 0-es5.js.map** () 34.4 kB  **[rendered]**

chunk { **3** } **3-es2015.js, 3-es2015.js.map** () 44.5 kB  **[rendered]**

chunk { **3** } **3-es5.js, 3-es5.js.map** () 51.6 kB  **[rendered]**

chunk { **1** } **1-es2015.js, 1-es2015.js.map** () 29.2 kB  **[rendered]**

chunk { **1** } **1-es5.js, 1-es5.js.map** () 34.4 kB  **[rendered]**

chunk { **7** } **7-es2015.js, 7-es2015.js.map** () 6.26 kB  **[rendered]**

chunk { **7** } **7-es5.js, 7-es5.js.map** () 8.02 kB  **[rendered]**

chunk { **6** } **6-es2015.js, 6-es2015.js.map** () 6.26 kB  **[rendered]**

chunk { **6** } **6-es5.js, 6-es5.js.map** () 8.03 kB  **[rendered]**

chunk { **4** } **4-es2015.js, 4-es2015.js.map** () 66.6 kB  **[rendered]**

chunk { **4** } **4-es5.js, 4-es5.js.map** () 89.5 kB  **[rendered]**

chunk { **5** } **5-es2015.js, 5-es2015.js.map** () 66.6 kB  **[rendered]**

chunk { **5** } **5-es5.js, 5-es5.js.map** () 89.5 kB  **[rendered]**

chunk { **9** } **9-es2015.js, 9-es2015.js.map** () 16.1 kB  **[rendered]**

chunk { **9** } **9-es5.js, 9-es5.js.map** () 20.3 kB  **[rendered]**

chunk { **13** } **13-es2015.js, 13-es2015.js.map** () 31.5 kB  **[rendered]**

chunk { **13** } **13-es5.js, 13-es5.js.map** () 35 kB  **[rendered]**

chunk { **11** } **11-es2015.js, 11-es2015.js.map** () 3.74 kB  **[rendered]**

chunk { **11** } **11-es5.js, 11-es5.js.map** () 5.34 kB  **[rendered]**

chunk { **15** } **15-es2015.js, 15-es2015.js.map** () 16.6 kB  **[rendered]**

chunk { **15** } **15-es5.js, 15-es5.js.map** () 19.3 kB  **[rendered]**

chunk { **12** } **12-es2015.js, 12-es2015.js.map** () 31.5 kB  **[rendered]**

chunk { **12** } **12-es5.js, 12-es5.js.map** () 35 kB  **[rendered]**

chunk { **10** } **10-es2015.js, 10-es2015.js.map** () 3.74 kB  **[rendered]**

chunk { **10** } **10-es5.js, 10-es5.js.map** () 5.35 kB  **[rendered]**

chunk { **8** } **8-es2015.js, 8-es2015.js.map** () 16.1 kB  **[rendered]**

chunk { **8** } **8-es5.js, 8-es5.js.map** () 20.3 kB  **[rendered]**

chunk { **14** } **14-es2015.js, 14-es2015.js.map** () 16.6 kB  **[rendered]**

chunk { **14** } **14-es5.js, 14-es5.js.map** () 19.3 kB  **[rendered]**

chunk { **18** } **18-es2015.js, 18-es2015.js.map** () 9.72 kB  **[rendered]**

chunk { **18** } **18-es5.js, 18-es5.js.map** () 11.1 kB  **[rendered]**

chunk { **19** } **19-es2015.js, 19-es2015.js.map** () 9.71 kB  **[rendered]**

chunk { **19** } **19-es5.js, 19-es5.js.map** () 11.1 kB  **[rendered]**

chunk { **20** } **20-es2015.js, 20-es2015.js.map** () 16.3 kB  **[rendered]**

chunk { **20** } **20-es5.js, 20-es5.js.map** () 20.3 kB  **[rendered]**

chunk { **22** } **22-es2015.js, 22-es2015.js.map** () 78.2 kB  **[rendered]**

chunk { **22** } **22-es5.js, 22-es5.js.map** () 94.5 kB  **[rendered]**

chunk { **26** } **26-es2015.js, 26-es2015.js.map** () 14.3 kB  **[rendered]**

chunk { **26** } **26-es5.js, 26-es5.js.map** () 19.4 kB  **[rendered]**

chunk { **23** } **23-es2015.js, 23-es2015.js.map** () 26.5 kB  **[rendered]**

chunk { **23** } **23-es5.js, 23-es5.js.map** () 31.2 kB  **[rendered]**

chunk { **25** } **25-es2015.js, 25-es2015.js.map** () 3.49 kB  **[rendered]**

chunk { **25** } **25-es5.js, 25-es5.js.map** () 5.11 kB  **[rendered]**

chunk { **28** } **28-es2015.js, 28-es2015.js.map** () 19.7 kB  **[rendered]**

chunk { **28** } **28-es5.js, 28-es5.js.map** () 24 kB  **[rendered]**

chunk { **16** } **16-es2015.js, 16-es2015.js.map** () 11.4 kB  **[rendered]**

chunk { **16** } **16-es5.js, 16-es5.js.map** () 14 kB  **[rendered]**

chunk { **30** } **30-es2015.js, 30-es2015.js.map** () 32.9 kB  **[rendered]**

chunk { **30** } **30-es5.js, 30-es5.js.map** () 44.1 kB  **[rendered]**

chunk { **21** } **21-es2015.js, 21-es2015.js.map** () 78.2 kB  **[rendered]**

chunk { **21** } **21-es5.js, 21-es5.js.map** () 94.5 kB  **[rendered]**

chunk { **32** } **32-es2015.js, 32-es2015.js.map** () 69 kB  **[rendered]**

chunk { **32** } **32-es5.js, 32-es5.js.map** () 76.3 kB  **[rendered]**

chunk { **31** } **31-es2015.js, 31-es2015.js.map** () 32.9 kB  **[rendered]**

chunk { **31** } **31-es5.js, 31-es5.js.map** () 44.1 kB  **[rendered]**

chunk { **34** } **34-es2015.js, 34-es2015.js.map** () 15.9 kB  **[rendered]**

chunk { **34** } **34-es5.js, 34-es5.js.map** () 19.6 kB  **[rendered]**

chunk { **33** } **33-es2015.js, 33-es2015.js.map** () 69 kB  **[rendered]**

chunk { **33** } **33-es5.js, 33-es5.js.map** () 76.3 kB  **[rendered]**

chunk { **35** } **35-es2015.js, 35-es2015.js.map** () 15.9 kB  **[rendered]**

chunk { **35** } **35-es5.js, 35-es5.js.map** () 19.6 kB  **[rendered]**

chunk { **27** } **27-es2015.js, 27-es2015.js.map** () 14.3 kB  **[rendered]**

chunk { **27** } **27-es5.js, 27-es5.js.map** () 19.4 kB  **[rendered]**

chunk { **36** } **36-es2015.js, 36-es2015.js.map** () 34.6 kB  **[rendered]**

chunk { **36** } **36-es5.js, 36-es5.js.map** () 49 kB  **[rendered]**

chunk { **40** } **40-es2015.js, 40-es2015.js.map** () 34.2 kB  **[rendered]**

chunk { **40** } **40-es5.js, 40-es5.js.map** () 49.8 kB  **[rendered]**

chunk { **39** } **39-es2015.js, 39-es2015.js.map** () 29 kB  **[rendered]**

chunk { **39** } **39-es5.js, 39-es5.js.map** () 35 kB  **[rendered]**

chunk { **42** } **42-es2015.js, 42-es2015.js.map** () 22.4 kB  **[rendered]**

chunk { **42** } **42-es5.js, 42-es5.js.map** () 27.1 kB  **[rendered]**

chunk { **37** } **37-es2015.js, 37-es2015.js.map** () 34.6 kB  **[rendered]**

chunk { **37** } **37-es5.js, 37-es5.js.map** () 49 kB  **[rendered]**

chunk { **45** } **45-es2015.js, 45-es2015.js.map** () 12.7 kB  **[rendered]**

chunk { **45** } **45-es5.js, 45-es5.js.map** () 16.9 kB  **[rendered]**

chunk { **44** } **44-es2015.js, 44-es2015.js.map** () 21.6 kB  **[rendered]**

chunk { **44** } **44-es5.js, 44-es5.js.map** () 23.4 kB  **[rendered]**

chunk { **38** } **38-es2015.js, 38-es2015.js.map** () 29 kB  **[rendered]**

chunk { **38** } **38-es5.js, 38-es5.js.map** () 35 kB  **[rendered]**

chunk { **46** } **46-es2015.js, 46-es2015.js.map** () 12.7 kB  **[rendered]**

chunk { **46** } **46-es5.js, 46-es5.js.map** () 16.9 kB  **[rendered]**

chunk { **41** } **41-es2015.js, 41-es2015.js.map** () 22.4 kB  **[rendered]**

chunk { **41** } **41-es5.js, 41-es5.js.map** () 27.1 kB  **[rendered]**

chunk { **43** } **43-es2015.js, 43-es2015.js.map** () 21.6 kB  **[rendered]**

chunk { **43** } **43-es5.js, 43-es5.js.map** () 23.4 kB  **[rendered]**

chunk { **47** } **47-es2015.js, 47-es2015.js.map** () 27.9 kB  **[rendered]**

chunk { **47** } **47-es5.js, 47-es5.js.map** () 33.8 kB  **[rendered]**

chunk { **50** } **50-es2015.js, 50-es2015.js.map** () 52.1 kB  **[rendered]**

chunk { **50** } **50-es5.js, 50-es5.js.map** () 68.2 kB  **[rendered]**

chunk { **24** } **24-es2015.js, 24-es2015.js.map** () 26.5 kB  **[rendered]**

chunk { **24** } **24-es5.js, 24-es5.js.map** () 31.2 kB  **[rendered]**

chunk { **49** } **49-es2015.js, 49-es2015.js.map** () 52.1 kB  **[rendered]**

chunk { **49** } **49-es5.js, 49-es5.js.map** () 68.2 kB  **[rendered]**

chunk { **51** } **51-es2015.js, 51-es2015.js.map** () 13.1 kB  **[rendered]**

chunk { **51** } **51-es5.js, 51-es5.js.map** () 18.1 kB  **[rendered]**

chunk { **57** } **57-es2015.js, 57-es2015.js.map** () 37.4 kB  **[rendered]**

chunk { **57** } **57-es5.js, 57-es5.js.map** () 45.9 kB  **[rendered]**

chunk { **58** } **58-es2015.js, 58-es2015.js.map** () 37.4 kB  **[rendered]**

chunk { **58** } **58-es5.js, 58-es5.js.map** () 45.9 kB  **[rendered]**

chunk { **55** } **55-es2015.js, 55-es2015.js.map** () 33.3 kB  **[rendered]**

chunk { **55** } **55-es5.js, 55-es5.js.map** () 38 kB  **[rendered]**

chunk { **60** } **60-es2015.js, 60-es2015.js.map** () 24.4 kB  **[rendered]**

chunk { **60** } **60-es5.js, 60-es5.js.map** () 34.8 kB  **[rendered]**

chunk { **56** } **56-es2015.js, 56-es2015.js.map** () 33.3 kB  **[rendered]**

chunk { **56** } **56-es5.js, 56-es5.js.map** () 38 kB  **[rendered]**

chunk { **48** } **48-es2015.js, 48-es2015.js.map** () 27.9 kB  **[rendered]**

chunk { **48** } **48-es5.js, 48-es5.js.map** () 33.8 kB  **[rendered]**

chunk { **62** } **62-es2015.js, 62-es2015.js.map** () 58.1 kB  **[rendered]**

chunk { **62** } **62-es5.js, 62-es5.js.map** () 77.9 kB  **[rendered]**

chunk { **52** } **52-es2015.js, 52-es2015.js.map** () 13.1 kB  **[rendered]**

chunk { **52** } **52-es5.js, 52-es5.js.map** () 18.1 kB  **[rendered]**

chunk { **63** } **63-es2015.js, 63-es2015.js.map** () 8.27 kB  **[rendered]**

chunk { **63** } **63-es5.js, 63-es5.js.map** () 9.99 kB  **[rendered]**

chunk { **64** } **64-es2015.js, 64-es2015.js.map** () 10 kB  **[rendered]**

chunk { **64** } **64-es5.js, 64-es5.js.map** () 12 kB  **[rendered]**

chunk { **29** } **29-es2015.js, 29-es2015.js.map** () 19.7 kB  **[rendered]**

chunk { **29** } **29-es5.js, 29-es5.js.map** () 24 kB  **[rendered]**

chunk { **17** } **17-es2015.js, 17-es2015.js.map** () 11.4 kB  **[rendered]**

chunk { **17** } **17-es5.js, 17-es5.js.map** () 14 kB  **[rendered]**

chunk { **53** } **53-es2015.js, 53-es2015.js.map** () 6.59 kB  **[rendered]**

chunk { **53** } **53-es5.js, 53-es5.js.map** () 9.7 kB  **[rendered]**

chunk { **54** } **54-es2015.js, 54-es2015.js.map** () 24.4 kB  **[rendered]**

chunk { **54** } **54-es5.js, 54-es5.js.map** () 45.8 kB  **[rendered]**

chunk { **65** } **65-es2015.js, 65-es2015.js.map** () 10 kB  **[rendered]**

chunk { **65** } **65-es5.js, 65-es5.js.map** () 12 kB  **[rendered]**

chunk { **59** } **59-es2015.js, 59-es2015.js.map** () 24.4 kB  **[rendered]**

chunk { **59** } **59-es5.js, 59-es5.js.map** () 34.8 kB  **[rendered]**

chunk { **69** } **69-es2015.js, 69-es2015.js.map** () 1.88 kB  **[rendered]**

chunk { **69** } **69-es5.js, 69-es5.js.map** () 3.12 kB  **[rendered]**

chunk { **68** } **68-es2015.js, 68-es2015.js.map** () 8.54 kB  **[rendered]**

chunk { **68** } **68-es5.js, 68-es5.js.map** () 17.7 kB  **[rendered]**

chunk { **61** } **61-es2015.js, 61-es2015.js.map** () 58.2 kB  **[rendered]**

chunk { **61** } **61-es5.js, 61-es5.js.map** () 77.9 kB  **[rendered]**

chunk { **67** } **67-es2015.js, 67-es2015.js.map** () 23.9 kB  **[rendered]**

chunk { **67** } **67-es5.js, 67-es5.js.map** () 27.2 kB  **[rendered]**

chunk { **71** } **71-es2015.js, 71-es2015.js.map** () 17.3 kB  **[rendered]**

chunk { **71** } **71-es5.js, 71-es5.js.map** () 21.6 kB  **[rendered]**

chunk { **74** } **74-es2015.js, 74-es2015.js.map** () 17.1 kB  **[rendered]**

chunk { **74** } **74-es5.js, 74-es5.js.map** () 21.8 kB  **[rendered]**

chunk { **72** } **72-es2015.js, 72-es2015.js.map** () 23.2 kB  **[rendered]**

chunk { **72** } **72-es5.js, 72-es5.js.map** () 29.6 kB  **[rendered]**

chunk { **70** } **70-es2015.js, 70-es2015.js.map** () 17.3 kB  **[rendered]**

chunk { **70** } **70-es5.js, 70-es5.js.map** () 21.6 kB  **[rendered]**

chunk { **accounts-accounts-module** } **accounts-accounts-module-es2015.js, accounts-accounts-module-es2015.js.map** (accounts-accounts-module) 7.48 kB  **[rendered]**

chunk { **accounts-accounts-module** } **accounts-accounts-module-es5.js, accounts-accounts-module-es5.js.map** (accounts-accounts-module) 9.17 kB  **[rendered]**

chunk { **input-shims-77712174-js** } **input-shims-77712174-js-es2015.js, input-shims-77712174-js-es2015.js.map** (input-shims-77712174-js) 15.3 kB  **[rendered]**

chunk { **input-shims-77712174-js** } **input-shims-77712174-js-es5.js, input-shims-77712174-js-es5.js.map** (input-shims-77712174-js) 20.4 kB  **[rendered]**

chunk { **76** } **76-es2015.js, 76-es2015.js.map** () 19.9 kB  **[rendered]**

chunk { **76** } **76-es5.js, 76-es5.js.map** () 28.6 kB  **[rendered]**

chunk { **73** } **73-es2015.js, 73-es2015.js.map** () 23.1 kB  **[rendered]**

chunk { **73** } **73-es5.js, 73-es5.js.map** () 29.6 kB  **[rendered]**

chunk { **polyfills-core-js** } **polyfills-core-js-es2015.js, polyfills-core-js-es2015.js.map** (polyfills-core-js) 78.7 kB  **[rendered]**

chunk { **polyfills-core-js** } **polyfills-core-js-es5.js, polyfills-core-js-es5.js.map** (polyfills-core-js) 151 kB  **[rendered]**

chunk { **focus-visible-15ada7f7-js** } **focus-visible-15ada7f7-js-es2015.js, focus-visible-15ada7f7-js-es2015.js.map** (focus-visible-15ada7f7-js) 2.12 kB  **[rendered]**

chunk { **focus-visible-15ada7f7-js** } **focus-visible-15ada7f7-js-es5.js, focus-visible-15ada7f7-js-es5.js.map** (focus-visible-15ada7f7-js) 2.38 kB  **[rendered]**

chunk { **login-login-module** } **login-login-module-es2015.js, login-login-module-es2015.js.map** (login-login-module) 11.7 kB  **[rendered]**

chunk { **login-login-module** } **login-login-module-es5.js, login-login-module-es5.js.map** (login-login-module) 15.4 kB  **[rendered]**

chunk { **polyfills-dom** } **polyfills-dom-es2015.js, polyfills-dom-es2015.js.map** (polyfills-dom) 38.5 kB  **[rendered]**

chunk { **polyfills-dom** } **polyfills-dom-es5.js, polyfills-dom-es5.js.map** (polyfills-dom) 62.1 kB  **[rendered]**

chunk { **75** } **75-es2015.js, 75-es2015.js.map** () 17.1 kB  **[rendered]**

chunk { **75** } **75-es5.js, 75-es5.js.map** () 21.8 kB  **[rendered]**

chunk { **66** } **66-es2015.js, 66-es2015.js.map** () 23.9 kB  **[rendered]**

chunk { **66** } **66-es5.js, 66-es5.js.map** () 27.2 kB  **[rendered]**

chunk { **polyfills-css-shim** } **polyfills-css-shim-es2015.js, polyfills-css-shim-es2015.js.map** (polyfills-css-shim) 10.5 kB  **[rendered]**

chunk { **polyfills-css-shim** } **polyfills-css-shim-es5.js, polyfills-css-shim-es5.js.map** (polyfills-css-shim) 14.6 kB  **[rendered]**

chunk { **index-120c8c20-js** } **index-120c8c20-js-es2015.js, index-120c8c20-js-es2015.js.map** (index-120c8c20-js) 7.27 kB  **[rendered]**

chunk { **index-120c8c20-js** } **index-120c8c20-js-es5.js, index-120c8c20-js-es5.js.map** (index-120c8c20-js) 8.39 kB  **[rendered]**

chunk { **runtime** } **runtime-es2015.js, runtime-es2015.js.map** (runtime) 9.74 kB **[entry]** **[rendered]**

chunk { **runtime** } **runtime-es5.js, runtime-es5.js.map** (runtime) 9.74 kB **[entry]** **[rendered]**

chunk { **swipe-back-7b4b8b66-js** } **swipe-back-7b4b8b66-js-es2015.js, swipe-back-7b4b8b66-js-es2015.js.map** (swipe-back-7b4b8b66-js) 2.84 kB  **[rendered]**

chunk { **swipe-back-7b4b8b66-js** } **swipe-back-7b4b8b66-js-es5.js, swipe-back-7b4b8b66-js-es5.js.map** (swipe-back-7b4b8b66-js) 3.05 kB  **[rendered]**

chunk { **styles** } **styles-es2015.js, styles-es2015.js.map** (styles) 115 kB **[initial]** **[rendered]**

chunk { **styles** } **styles-es5.js, styles-es5.js.map** (styles) 117 kB **[initial]** **[rendered]**

chunk { **shadow-css-93af91ae-js** } **shadow-css-93af91ae-js-es2015.js, shadow-css-93af91ae-js-es2015.js.map** (shadow-css-93af91ae-js) 15.9 kB  **[rendered]**

chunk { **shadow-css-93af91ae-js** } **shadow-css-93af91ae-js-es5.js, shadow-css-93af91ae-js-es5.js.map** (shadow-css-93af91ae-js) 18.8 kB  **[rendered]**

chunk { **register-register-module** } **register-register-module-es2015.js, register-register-module-es2015.js.map** (register-register-module) 13.1 kB  **[rendered]**

chunk { **register-register-module** } **register-register-module-es5.js, register-register-module-es5.js.map** (register-register-module) 16.3 kB  **[rendered]**

chunk { **swiper-bundle-f564f87c-js** } **swiper-bundle-f564f87c-js-es2015.js, swiper-bundle-f564f87c-js-es2015.js.map** (swiper-bundle-f564f87c-js) 195 kB  **[rendered]**

chunk { **swiper-bundle-f564f87c-js** } **swiper-bundle-f564f87c-js-es5.js, swiper-bundle-f564f87c-js-es5.js.map** (swiper-bundle-f564f87c-js) 233 kB  **[rendered]**

chunk { **tap-click-252af35a-js** } **tap-click-252af35a-js-es2015.js, tap-click-252af35a-js-es2015.js.map** (tap-click-252af35a-js) 6.23 kB  **[rendered]**

chunk { **tap-click-252af35a-js** } **tap-click-252af35a-js-es5.js, tap-click-252af35a-js-es5.js.map** (tap-click-252af35a-js) 6.73 kB  **[rendered]**

chunk { **status-tap-6a77b957-js** } **status-tap-6a77b957-js-es2015.js, status-tap-6a77b957-js-es2015.js.map** (status-tap-6a77b957-js) 1.61 kB  **[rendered]**

chunk { **status-tap-6a77b957-js** } **status-tap-6a77b957-js-es5.js, status-tap-6a77b957-js-es5.js.map** (status-tap-6a77b957-js) 1.77 kB  **[rendered]**

chunk { **vendor** } **vendor-es2015.js, vendor-es2015.js.map** (vendor) 5.37 MB **[initial]** **[rendered]**

chunk { **vendor** } **vendor-es5.js, vendor-es5.js.map** (vendor) 6.33 MB **[initial]** **[rendered]**

chunk { **common** } **common-es2015.js, common-es2015.js.map** (common) 13.7 kB  **[rendered]**

chunk { **common** } **common-es5.js, common-es5.js.map** (common) 19 kB  **[rendered]**

chunk { **main** } **main-es2015.js, main-es2015.js.map** (main) 39.5 kB **[initial]** **[rendered]**

chunk { **main** } **main-es5.js, main-es5.js.map** (main) 45.7 kB **[initial]** **[rendered]**

chunk { **crop-page-crop-page-module** } **crop-page-crop-page-module-es2015.js, crop-page-crop-page-module-es2015.js.map** (crop-page-crop-page-module) 136 kB  **[rendered]**

chunk { **crop-page-crop-page-module** } **crop-page-crop-page-module-es5.js, crop-page-crop-page-module-es5.js.map** (crop-page-crop-page-module) 151 kB  **[rendered]**

chunk { **home-home-module** } **home-home-module-es2015.js, home-home-module-es2015.js.map** (home-home-module) 231 kB  **[rendered]**

chunk { **home-home-module** } **home-home-module-es5.js, home-home-module-es5.js.map** (home-home-module) 262 kB  **[rendered]**

chunk { **cordova** } **cordova.js, cordova.js.map** (cordova) 68.2 kB **[entry]** **[rendered]**

Date: **2020-07-21T14:57:30.483Z** - Hash: **95d0f57be959f4ab5648** - Time: **43177** ms

**WARNING in /Users/luisalbertojuarez/Documents/ionic-projects/entersl/src/test.ts is part of the TypeScript compilation but it's unused.**

**Add only entry points to the 'files' or 'include' properties in your tsconfig.**

**WARNING in /Users/luisalbertojuarez/Documents/ionic-projects/entersl/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.**

**Add only entry points to the 'files' or 'include' properties in your tsconfig.**

> cordova prepare ios

luisalbertojuarez@iMac-de-luis entersl %

1 post - 1 participant

Read full topic

Hi, I have recently made the transition for my application from Ionic 3 to Ionic 5. In the process, I have been able to make a successful transition but there is still a major bug with the IOS application when it is released to the application store. for some reason, there are a few pages in my login screen that when I navigate back to the login screen from I am always showed a blank screen. I’m not sure why this is happening but I suspect it has something to do with the way I have routed the pages. from the login page I am routing to the external pages like so:

terms() {
    this.navCtrl.navigateForward('/terms');
  }

  privacy() {
    this.navCtrl.navigateForward('/privacy');
  }

  navigateForgotPasswd() {
    const navigationExtras: NavigationExtras = { queryParams: { user: this.user } };
    this.navCtrl.navigateForward(['/forgot-password'], navigationExtras);
  }

and in these external pages there is a cancel button to go back to the login back that is implemented as so:

cancel(){
    this.navCtrl.navigateRoot('/login');
  }

whenever I am debugging on my local emulator of IOS I am never receiving these blank pages. Any help is greatly appreciated.

3 posts - 2 participants

Read full topic

I’m trying to use Plotly.js with Stencil, but one of Plotly’s dependencies uses glslify, which apparently has an “Octal literal in strict mode”. Is no one else using Plotly with Stencil, or is there another way to get past this issue? I’m currently using the @types/plotly.js TypeScript types and running on Windows using the Stencil app template.

[ ERROR ]  Rollup: Parse Error
           Octal literal in strict mode (Note that you need plugins to import files that are not        
           JavaScript) 1: export default
           '...\node_modules\glslify' ^ 

I saw the note about Strict Mode, but I am not sure how to lobby the authors for such a large package.

1 post - 1 participant

Read full topic

Hi:

I’m trying to activate AdMob with capacitor with the AdMob capacitor community plugin at:

but there is a problem activating it because the “Capacitor Community Missing” in the MainActivity at:
com.getcapacitor.community.admob.AdMob.class

\android\app\src\main\java***\MainActivity.java

What to do? How to activate AdMob?

1 post - 1 participant

Read full topic

Hi Ionic,

Have a really bizarre problem where details are showing on a screen for me during testing and also in production. However, 1 or 2 users have said that these details are not showing for them but then others it is showing for. The response from the server each time i test it shows that these details are there and are visible and i am yet to do a test that they have not shown.

Is there any possible way for me to be able to see the logs or inspect the users where it doesn’t show to see the logs? This app is live on the play store as well, which i dont think you can inspect using chrome dev tools, if i am correct?

Any help would be appreciated!

Thanks

1 post - 1 participant

Read full topic

I have installed ionic frame work and created a project called sudo ionic start everything is good so far i have choosed ionic with a side bar project and following the tutorial over here https://www.sitepoint.com/ionic-4-angular-build-app/ And i have done a couple of reserch but all the documents are actually assuming that the src/app/app-routing.module.ts File is already there any help is really appriciatable i have checked there official documentation in at that also they are assuming this file is already there.

My Ionic version

CLI PRO 4.0.0

1 post - 1 participant

Read full topic

Bonjour,
Nous recherchons un développeur fullstack IONIC expérimenté en freelance pour nous aider :

• à effectuer la migration de IONIC 3 vers IONIC 4/5.
• mettre à jour les dépendances qui sont obsolètes
• à effectuer de petites modifications et améliorations

L’application qui est une solution pour l’éducation (lms) a été créée il y a environ 1 an et est pleinement fonctionnelle. Elle dispose d’un backend développé avec Loopback3 + Angular + Node.Js et utilise une base de données Postgree SQL.

Notre espoir est de pouvoir trouver quelqu’un pour une collaboration à long terme pour tous nos besoins de maintenance de modifications ou améliorations.

3 posts - 3 participants

Read full topic

trying to get data from firebase based on the login user ID but i am having error when using changes.map. Error show in vscode is “property ‘map’ does not exist on type ‘unknown’”.

Below is how i am getting the data:

-----------------shopping-list.ts:-----------------

userId: string;
private shoppingListRef: any;

  constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth){
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.userId = data.uid;
        this.shoppingListRef = this.db.list<Item>(`shopping-list/${data.uid}`);
      }
    })
  }

  getShoppingList(){
    return this.shoppingListRef;
  }

---------------home.ts:----------------------

shoppingList$: Observable<Item[]>;
  userId: string;
  profileData: Observable<Profile>;

  constructor(public navCtrl: NavController, private shopping: shoppingListService,
    public db: AngularFireDatabase, private toast: ToastService,
    private afAuth: AngularFireAuth, private account: userAccountService) {}

  ionViewWillLoad(){
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.profileData = this.db.object<Profile>(`profile/${data.uid}`).valueChanges();
        this.userId = data.uid;
        this.getItemList();
      }
      else{
        this.navCtrl.setRoot('LoginPage');
      }
    })
  }

  getItemList(){
    try{
      this.shoppingList$ = this.shopping
        .getShoppingList() //this reruns the DB list
        .snapshotChanges() //this gives the keys and value pairs
        .pipe(map(
          changes => {
            **return changes.map(c => ({//this changes.map is where the error is showing**
              key: c.payload.key,
              ...c.payload.val()
            }));
          }
        ));
    }
    catch(e){
      console.error(e);
    }
  }

----home.html------ This is how i display the records

<ion-item-sliding *ngFor="let item of shoppingList$ | async; let i=index" (click)="toggleAccordion(i)" [ngClass]="{active: isAccordionShown(i)}" >

------Below is my package.jason:--------

{
  "name": "shoppingList",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@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/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "4.20.0",
    "@ionic-native/network": "^4.20.0",
    "@ionic-native/splash-screen": "4.20.0",
    "@ionic-native/status-bar": "4.20.0",
    "@ionic/storage": "2.2.0",
    "angularfire2": "^5.4.2",
    "cordova-plugin-network-information": "2.0.2",
    "cordova-res": "^0.15.1",
    "firebase": "^7.15.0",
    "ionic-angular": "3.9.9",
    "ionicons": "3.0.0",
    "native-run": "^1.0.0",
    "promise-polyfill": "^8.1.3",
    "rxjs": "6.0.0",
    "rxjs-compat": "6.2.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "@ionic/lab": "3.1.7",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "1.3.3",
    "typescript": "^2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-network-information": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

This error Started after i upgraded typescript to the latest using npm i typscript@latest and it updated to version “^3.9.7”.

-----Things i have tried-------

• Downgrade the typescript
• Upgrade rxjs and rxjs-compat to 6.5.5,6.3.0,6.2.0
• Created a new project
• Delete node_modules, package-lock.jason, and did npm install

I really need help beause i have been on this for days with no solution. Thanks to you all in advance

1 post - 1 participant

Read full topic

Trying to use an NPM package that has been published to a local repository. I am able to use the .npmrc file to authenticate and use the package, however see the below error when trying to BUILD the solution :

“@stencil/core”: “^1.12.2”,

[ ERROR ] Rollup: Parse Error: ./node_modules/@mypackage/api-wrapper/src/index.ts:16:11
Unexpected token (Note that you need plugins to import files that are not JavaScript)

 L15:   */
 L16:  public postFeedbackToApi(appId: any, area: string, description: string, trackingID: any, feedbackType: str
 L17:      var promise = new Promise<Response>((resolve, reject) => {

[14:50.3] build failed in 2.20 s

1 post - 1 participant

Read full topic

When I use the blinkid-cordova plugin (part of the @ionic-native/blinkid solution), the plugin script uses wget to grab their SDK, but in the build environment for Appflow, wget fails. Do you know if it is possible to either use wget in this environment or what is the acceptable approach for loading SDKs from the web in a plugin? They also use unzip, but I don’t know if it passes/fails yet.

1 post - 1 participant

Read full topic

The default drawer close animation is cancelled or happening too fast when I route between pages, I understand that this isn’t the normal behaviour of Ionic menu, is there a solution for this?

note: this bug is only happening on ios device, and not on the chrome emulated ios phone view

code for the Ionic menu:

   <IonMenu
      contentId="main"
      type="overlay"
      className="Menu"
    >

and the Ionic Menu Toggle:

<IonMenuToggle key={index} autoHide={false}>
          <IonItem
            routerLink="/dashboard/earnings"
            lines="none"
            routerDirection="none"
            detail={false}
            className="navItem"

my Routes:

  <Route
            path="/dashboard/earnings"
            render={() => {
              return <Earnings />
            }}
            exact
          />

Phone: Iphone X
Ios Version: 13.6

nav600×1300 1.44 MB

3 posts - 2 participants

Read full topic