Ionic 4 + FCM: How to fix the compiler error - colorAccent not found? - firebase-cloud-messaging

Question

I am working on an Ionic 4 App. I am trying to customize the color of "default_notification_color", but the compiler throws an error. I have the following in my config.xml file:
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="#color/orange" />
I have created a new file called "colors.xml" and placed it in the following directory in my project root:
gf > res > values > colors.xml
Here are the contents of colors.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorAccent">#3880ff</color>
    <color name="white">#FFFFFF</color>
    <color name="ivory">#FFFFF0</color>    
    <color name="orange">#FFA500</color>
    <color name="navy">#000080</color>
    <color name="black">#000000</color>
</resources>
I tried to build the app using the following command:
ionic cordova build android --prod 
But it throws me the following error:
BUILD FAILED in 9s
24 actionable tasks: 4 executed, 20 up-to-date
D:\Softwares\wamp\www\gf\platforms\android\gradlew: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Android resource linking failed
  D:\Softwares\wamp\www\gf\platforms\android\app\build\intermediates\merged_manifests\debug\AndroidManifest.xml:122: AAPT: error: resource color/orange (aka com.mydomain.myapp:color/orange) not found.
  error: failed processing manifest.
How can this be fixed so that the value is read from the colors.xml file without any issues? 

Answer 1

Ok I figured it out. I had to include the following line in config.xml:
<resource-file src="res/values/colors.xml" target="app/src/main/res/values/colors.xml" />
What this does is essentially it copies the colors.xml
file from the location res/values in the project root, to the location platforms/android/app/src/main/res/values/ folder (considering that you are building this for Android)
It then looks in the colors.xml file for the name "orange" and looks up the corresponding value (i.e. in this case, would be #FFA500) and assigns it as the Notification Icon color.
That's it! So from now on, whenever a notification is received, its color would be equal to the orange color as I indicated in the colors.xml file.
Hope this helps someone.

Answer 2

I ran into the same error while installing the plugin cordova-plugin-firebasex
Just clean the plugins and the platform was built successfully
rm -Rf platforms/android
cordova plugin rm cordova-plugin-firebasex
rm -Rf plugins/ node_modules/
npm install
ionic cordova plugin add cordova-plugin-firebasex
ionic cordova build android
OR
In case you have a problem,
You can rebuild the platform by modifying the following versions:
package.json
"cordova-plugin-firebasex": "^10.2.0-cli", /* VERSION */
"cordova-plugin-firebasex": { /* OPTIONS */
"FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
"FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",
"FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true",
"ANDROID_ICON_ACCENT": "#FF00FFFF",
"ANDROID_PLAY_SERVICES_AUTH_VERSION": "18.0.0",
"ANDROID_FIREBASE_ANALYTICS_VERSION": "17.4.3",
"ANDROID_FIREBASE_MESSAGING_VERSION": "20.2.1",
"ANDROID_FIREBASE_CONFIG_VERSION": "19.1.4",
"ANDROID_FIREBASE_PERF_VERSION": "19.0.7",
"ANDROID_FIREBASE_AUTH_VERSION": "19.3.1",
"ANDROID_FIREBASE_FIRESTORE_VERSION": "21.4.3",
"ANDROID_FIREBASE_CRASHLYTICS_VERSION": "17.0.1",
"ANDROID_FIREBASE_CRASHLYTICS_NDK_VERSION": "17.0.1",
"ANDROID_GSON_VERSION": "2.8.6",
"ANDROID_PLAY_SERVICES_TAGMANAGER_VERSION": "17.0.0",
"ANDROID_FIREBASE_INAPPMESSAGING_VERSION": "19.0.7"
},
"#ionic-native/firebase-x": "^5.29.0", /* */