Ionic

In Xcode attempting to build or run an app, I receiving a framework error.

Working through an app project I inherited using Ionic, Angular and ngx-leaflet to name a few elements... I had a problem where the map shows only all map tiles when navigating via my app in the Xcode simulator.  The simulator screen would show just a small tile and the rest of the area where the map should be visible stays in gray color.

It appears that the plugin or file path is not working how it used to be on previous iOS versions. Previous version had the splash screen showing.  After upgrading to plugins, a black screen is shown.

The easiest way to simulate the problem is using iOS simulator.  A black screen will show up as the splash screen.

How can you find out if the Cordova plugins have been loaded?

Begin by running the command

ionic info

You will see a response similar to

Updating the Cordova plugins... there are two locations to manage the plugins

• config.xml
• package.json

I was finding some Cordova functionality was not coming through... through further investigation the two files above had conflicting data.

Review the data

package.json

The issue

Text through the app is being rendered as

<p>Depletion estimates, Age and size composition, Catch, Effort, Catch rates, Fishing mortality</p>

Therefore, in this instance the HTML p tags are being displayed along with the text.

The code

Currently the code outputting this is written as:

If you have upgraded Ionic to 5 or 6 you will have experienced that the padding attribute is not working anymore.

<ion-content padding *ngIf="loaded" color="medium">

Use of attributes was deprecated in Ionic v4.  If you would have noticed in developers console, Ionic 4 was presenting warnings of using these attributes.  So post Ionic 4, these attributes were transitioned to CSS classes.

How do you get the version of ionic framework?

ionic version

or

ionic -v

The response for me is 

6.19.0

Looking for more details?  Then use

While loading an ionic project, in Xcode when performing a run routine I had the following response

I recently received an ionic app that hasn't been updated for quite some time.  What steps did I do to unpack this situation and as a minimum get the packages updated?

To start, I did a quick check on the number of packages missing or outdated can be discovered through using the command:

npm outdated

Reponse from command: