Ionic

This article works through the steps to update dependencies in package.json file to the latest version.

Use npm-check-updates or npm outdated to suggest the latest versions.

npm-check-updates is a utility that automatically adjusts a package.json with the latest version of all dependencies

Android Studio error

Android Studio error

error: package android.support.v4.content does not exist

This is a problem with plugins using old Android support dependencies instead of the AndroidX equivalent.  As it's a dependency issue, to resolve add jetifier.  I know yet another package...

Android Studio build errors

Build failed error: cannot find symbol if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R)

or

cannot find symbol Build.VERSION.SDK_INT >= Build.VERSION_CODES.S &&

To resolve - upgrade the compileSdkVersion and targetSdkVersion to 31 in your grade file.  Note, this setting could be in one of the following files

Initialise your Capacitor config​

To initialise Capacitor use the CLI questionnaire:

npx cap init

On executing the above command, you will be prompted to answer a few questions for your app such as your app's name and the package ID.

Run the NPX commands to update the app

npm run build && npx cap sync

Run app with live reload

ionic cap run {platform} -l --external

Replace {platform} with Android or iOS depending on your environment as follows

Approaches to resolving “Module not specified” Error in Android Studio

When attempting to run or debug the application on Android Studio you can come across the error “Module not specified” in the Android Studio.  This article will outline approaches I took to get a resolution to this issue.

Working in Android Studio when attempting to run a project I had the following error

Unable to determine application id: com.android.tools.idea.run.ApkProvisionException: ERROR: APK path is not specified for module "android"

In Xcode and executing a run command, the response error was:

{
    "name": "NullInjectorError",
    "ngTempTokenPath": null,
    "ngTokenPath": ["Ee", "fe", "Ne", "Ne", "Ne"]
}

This was a result of me attempting to incorrectly import the AppComponent from inside a service.

import { AppComponent } from './app.component';

Loading the code in a platform - in this article, I'll be focusing on Android and iOS.  Ionic app shell prompts for iOS and Android devices.

Here's a breakdown of the commands:

npm run build

This command is used to build your web app. It's typically associated with web development frameworks like Angular, React, or Vue. It compiles your web app source code into production-ready files.