Issue
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?
Solution
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 ""
Answered By - Mike
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.