Ionic android 12 splash error while adding cordova-android@11

Question

Since Google raised the minimum sdk to 31 on the Google play console I had to make some changes and updates to Android 12, but when I try to add a new Android platform android@11 I have had this error regarding the flash that has changed on cordova11

could anyone help me?

Thank you very much in advance

here is the error:

Cannot read properties of null (reading 'find')
TypeError: Cannot read properties of null (reading 'find')
    at E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:387:49
    at Array.forEach (<anonymous>)
    at updateProjectSplashScreen (E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:384:7)
    at updateProjectAccordingTo (E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:269:5)
    at E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js:67:21
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
[ERROR] An error occurred while running subprocess cordova.

        cordova.cmd platform add android@11 --verbose exited with exit code 1.

and the file which raise the error is: E:\DEV\IONIC\donateApp_cord\node_modules\cordova-android\lib\prepare.js

function updateProjectSplashScreen (platformConfig, locations) {

    // res/values/themes.xml

    const themes = xmlHelpers.parseElementtreeSync(locations.themes);

    const splashScreenTheme = themes.find('style[@name="Theme.App.SplashScreen"]');

    [

        'windowSplashScreenAnimatedIcon',

        'windowSplashScreenAnimationDuration',

        'windowSplashScreenBackground',

        'windowSplashScreenBrandingImage',

        'windowSplashScreenIconBackgroundColor',

        'postSplashScreenTheme'

    ].forEach(themeKey => {

        const cdvConfigPrefKey = 'Android' + themeKey.charAt(0).toUpperCase() + themeKey.slice(1);

        const cdvConfigPrefValue = platformConfig.getPreference(cdvConfigPrefKey, this.platform);

        let themeTargetNode = splashScreenTheme.find(`item[@name="${themeKey}"]`);

        switch (themeKey) {

        case 'windowSplashScreenBackground':

            // use the user defined value for "colors.xml"

            updateProjectSplashScreenBackgroundColor(cdvConfigPrefValue, locations);

            // force the themes value to `@color/cdv_splashscreen_background`

            themeTargetNode.text = '@color/cdv_splashscreen_background';

            break;

        case 'windowSplashScreenAnimatedIcon':

            // handle here the cases of "png" vs "xml" (drawable)

            // If "png":

            //  - Clear out default or previous set "drawable/ic_cdv_splashscreen.xml" if exisiting.

            //  - Copy png in correct mipmap dir with name "ic_cdv_splashscreen.png"

            // If "xml":

            //  - Clear out "{mipmap}/ic_cdv_splashscreen.png" if existing.

            //  - Copy xml into drawable dir with name "ic_cdv_splashscreen.xml"

            // updateProjectSplashScreenIcon()

            // value should change depending on case:

            // If "png": "@mipmap/ic_cdv_splashscreen"

            // If "xml": "@drawable/ic_cdv_splashscreen"

            updateProjectSplashScreenImage(locations, themeKey, cdvConfigPrefKey, cdvConfigPrefValue);

            break;

        case 'windowSplashScreenBrandingImage':

            // display warning only when set.

            if (cdvConfigPrefValue) {

                events.emit('warn', `"${themeKey}" is currently not supported by the splash screen compatibility library. https://issuetracker.google.com/issues/194301890`);

            }

            updateProjectSplashScreenImage(locations, themeKey, cdvConfigPrefKey, cdvConfigPrefValue);

            // force the themes value to `@color/cdv_splashscreen_icon_background`

            if (!cdvConfigPrefValue && themeTargetNode) {

                splashScreenTheme.remove(themeTargetNode);

            } else if (cdvConfigPrefValue) {

                // if there is no current node, create a new node.

                if (!themeTargetNode) {

                    themeTargetNode = themes.getroot().makeelement('item', { name: themeKey });

                    splashScreenTheme.append(themeTargetNode);

                }

                // set the user defined color.

                themeTargetNode.text = '@drawable/ic_cdv_splashscreen_branding';

            }

            break;

        case 'windowSplashScreenIconBackgroundColor':

            // use the user defined value for "colors.xml"

            updateProjectSplashScreenIconBackgroundColor(cdvConfigPrefValue, locations);

            // force the themes value to `@color/cdv_splashscreen_icon_background`

            if (!cdvConfigPrefValue && themeTargetNode) {

                // currentItem.remove();

                splashScreenTheme.remove(themeTargetNode);

            } else if (cdvConfigPrefValue) {

                // if there is no current color, create a new node.

                if (!themeTargetNode) {

                    themeTargetNode = themes.getroot().makeelement('item', { name: themeKey });

                    splashScreenTheme.append(themeTargetNode);

                }

                // set the user defined color.

                themeTargetNode.text = '@color/cdv_splashscreen_icon_background';

            }

            break;

        case 'windowSplashScreenAnimationDuration':

            themeTargetNode.text = cdvConfigPrefValue || '200';

            break;

        case 'postSplashScreenTheme':

            themeTargetNode.text = cdvConfigPrefValue || '@style/Theme.AppCompat.NoActionBar';

            break;

        default:

            events.emit('warn', `The theme property "${themeKey}" does not exist`);

        }

    });

    fs.writeFileSync(locations.themes, themes.write({ indent: 4 }), 'utf-8');

    events.emit('verbose', 'Wrote out Android application themes to ' + locations.themes);
}

on the splashScreenTheme.find function on foreach, can someone help me please?

https://ionic.zendesk.com/hc/en-us/articles/7891143965975-Migrating-to-Cordova-Android-11. Please refere this. — Raja Sekaran, Feb 13 '23 at 09:01

score 8 · Accepted Answer · answered Sep 01 '22 at 08:57

8

In case it helps anyone, I found that one of the plugins I was using (specifically cordova-plugin-telerik-imagepicker) was writing its own themes.xml file to app/src/main/res/values which overwrites the template generated by Cordova.

That's why Cordova then crashes when trying to update elements in themes.xml that no longer exist.

I solved it by forking the plugin and removing its themes.xml. Not sure what impact that has on the plugin but I don't suspect much...

answered Sep 01 '22 at 08:57

Iguananaut

21,810
5
50
63

Hi, thanks for your answer, but i solved by migrating to capacitor, i hade no problem with that. – user8706852 Sep 14 '22 at 13:40
2

Saved my day, tysm! :) – Mekey Salaria Jan 22 '23 at 18:04

Mike · Answer 2 · 2022-08-22T10:16:18.290

Actually, i solved the compile problem, but the app runs on android 12 only and crashes on splash screen on all other android versions.

The error occurs in node_modules\cordova-android\lib\prepare.js in the method: updateProjectSplashScreen(...), because var splashScreenTheme is null, because theme (= style[@name="Theme.App.SplashScreen"]) is not found or var themeTargetNode is null, because theme item is not found.

I added the theme manually in themes.xml (& colors.xml) in platforms/android/app/src/main/res/values dir with the following content:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <style name="Theme.App.SplashScreen" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <!-- Set the splash screen background -->
        <!-- <item name="android:windowBackground">@android:color/white</item> -->
        <item name="windowSplashScreenBackground">@color/cdv_splashscreen_background</item>
        
        <!-- Use windowSplashScreenAnimatedIcon to add either a drawable or an animated drawable. One of these is required. -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_cdv_splashscreen</item>
        
        <!-- Required for animated icons -->
        <item name="windowSplashScreenAnimationDuration">200</item>
        
        <!-- Required: Set the theme of the Activity that directly follows your splash screen. -->
        <!-- <item name="postSplashScreenTheme">@style/Theme.App</item> -->
        <item name="postSplashScreenTheme">@style/Theme.AppCompat.NoActionBar</item>
    </style>
</resources>

Content of colors.xml:

<?xml version='1.0' encoding='utf-8'?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="cdv_splashscreen_background">#FFFFFF</color>
</resources>

This solved the error during build, but the app crashes on splash screen without errors, when it's started. I think i misconfigured the theme. I hope anyone here can correct the themes.xml file.

P.S.: Same problem was posted in ionic forum: https://forum.ionicframework.com/t/ionic-android-12-splash-error-while-adding-cordova-android-11/225896.

P.P.S.: I had to fix 2 other issues not mentioned in the ionic migration guide (https://ionic.zendesk.com/hc/en-us/articles/7891143965975-Migrating-to-Cordova-Android-11):

Did NOT remove cordova-plugin-androidx-adapter to prevent errors like: package android.support.v4.content does not exist or package android.support.v7.app does not exist.
Changed compile to implementation in some old plugins' gradle files (in platforms/android/ cordova-plugin-badge/XXX-badge.gradle, com-sarriaroman-photoviewer/XXX-photoviewer.gradle & phonegap-plugin-barcodescanner/XXX-barcodescanner.gradle)

I automated all corrections by using a "before ionic build script" in package.json, e.g.:

 "scripts": { "ionic:build:before": "./scripts/fix_android.sh", ... }

Content of scripts/fix_android.sh:

#!/usr/bin/env bash
echo ""
echo "Executing fix_android.sh"

## Copy resources/android/colors.xml & themes.xml to platforms/android/app/src/main/res/values
target=platforms/android/app/src/main/res/values
if [ -d "$target" ]; then
    file4="resources/android/colors.xml"
    if [ -f "$file4" ]; then
      cp -rvf "$file4" platforms/android/app/src/main/res/values
      echo "Copied colors.xml"
    else
      echo ${file4}" not found!"
    fi
    file5="resources/android/themes.xml"
    if [ -f "$file5" ]; then
      cp -rvf "$file5" platforms/android/app/src/main/res/values
      echo "Copied themes.xml"
    else
      echo ${file5}" not found!"
    fi
else
    echo ${target}" not found!"
fi

## Change compile to implementation in old plugins' gradle files
file6="platforms/android/cordova-plugin-badge/XXX-badge.gradle"
if [ -f "$file6" ]; then
    if grep -lr "compile" "$file6"; then
        sed -i '' "s/compile/implementation/g" "$file6"
        echo "Changed compile to implementation in XXX-badge.gradle"
    else
        echo "$file6"
        echo "File already corrected!"  
    fi
else
    echo ${file6}" not found!"
fi
file7="platforms/android/com-sarriaroman-photoviewer/XXX-photoviewer.gradle"
if [ -f "$file7" ]; then
    if grep -lr "compile" "$file7"; then
        sed -i '' "s/compile/implementation/g" "$file7"
        echo "Changed compile to implementation in XXX-photoviewer.gradle"
    else
        echo "$file7"
        echo "File already corrected!"
    fi  
else
    echo ${file7}" not found!"
fi
file8="platforms/android/phonegap-plugin-barcodescanner/XXX-barcodescanner.gradle"
if [ -f "$file8" ]; then
    if grep -lr "compile" "$file8"; then
        sed -i '' "s/compile/implementation/g" "$file8"
        echo "Changed compile to implementation in XXX-barcodescanner.gradle"
    else
        echo "$file8"
        echo "File already corrected!"  
    fi
else
    echo ${file8}" not found!"
fi

## Remove all <splash> tags from config.xml
file9="config.xml"
if [ -f "$file9" ]; then
    if grep -lr "<splash" "$file9"; then
        sed -i '' "s/<splash .* \/>//g" "$file9"
        echo "Removed <splash> tags in config.xml"
    else
        echo "$file9"
        echo "File already corrected!"  
    fi
else
    echo ${file9}" not found!"
fi

echo ""
echo ""

I'm at the same step now, still no have the solution for this? — user8706852, Aug 24 '22 at 17:35
Can you please let me know whether you get any solution yet? — Darshana, Sep 24 '22 at 06:35

score 3 · Answer 3 · answered Aug 14 '22 at 09:39

3

you must delete splash screen from config.xml from your app this link below

will help you :

https://ionic.zendesk.com/hc/en-us/articles/7891143965975-Migrating-to-Cordova-Android-11

answered Aug 14 '22 at 09:39

Laith Bzour

71
3

1

Yes, I already did it, the problem is after that. – user8706852 Aug 24 '22 at 17:37
add this line in your config.xml. -----> . your color.xml must be like this ---- >. #FFFFFF – Laith Bzour Aug 28 '22 at 05:54
Already did it too, now i decided to migrate to capacitor, hope i have luck – user8706852 Aug 29 '22 at 14:25

score 0 · Answer 4 · answered Feb 21 '23 at 13:07

In my case the problem was a widget resource file of the same name:

colors.txt

Which a hook copied to platforms/android/app/src/main/res/ (hook before compile).

As a consequence, the original colors.txt (which is always added by the cordova-android 11 during platform add command) was always overwritten.

When running command cordova build android for the first time after adding android platform, Gradle build crashed with:

ERROR:...\platforms\android\app\build\intermediates\incremental\debug\mergeDebugResources\merged.dir\values\values.xml:1743: AAPT: error: resource color/cdv_splashscreen_background (aka (app id):color/cdv_splashscreen_background) not found.

Then, when running command cordova build android for the second time the crash was:

Cannot set properties of null (setting 'text')

Because cordova-android could not find the original colors.xml file anymore.

I've spent maybe 6 hours finding the cause.

Ionic android 12 splash error while adding cordova-android@11

4 Answers4