Why are fallback translations not applied in my multi-component App?

Question

I have an application using nested Components. The manifest of RootComponent looks like this:

"componentUsages": {
    "UserComponent": {
        "name": "com.app.user",
        "settings": {},
        "componentData": {},
        "lazy": true
    },
    "AdminComponent": {
        "name": "com.app.admin",
        "settings": {},
        "componentData": {},
        "lazy": true
    }
},

Both components have the typical library folder structure:

I define the supportedLocales and fallbackLocale attributes within the manifests of the nested Components like this:

"sap.app": {
    "id": "com.app.admin",
    "i18n": {
        "bundleUrl": "i18n/i18n.properties",
        "supportedLocales": ["en", "de"],
        "fallbackLocale": "en"
    },
    "title": "{{appTitle}}"
},

//...

"models": {
    "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
            "bundleUrl": "i18n/i18n.properties",
            "supportedLocales": ["en", "de"],
            "fallbackLocale": "en"
        }
    }
}

However, when I launch the App, no translations are applied, even though there are no 404 errors in the network log. Instead of the translations, the UI only displays the keys. What do I need to do to make the fallback translation logic work with nested Comoponents?

Answer 1

As it turns out, when using nested Components in your App, you need to define the bundleName key instead of bundleUrl in the models section of manifest.xml:

"models": {
    "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
            "bundleName": "com.app.admin.i18n.i18n",
            "supportedLocales": ["en", "de"],
            "fallbackLocale": "en"
        }
    }
},

This is also shown in this official demo repository.
It seems not to matter which variant you use in the sap.app section though.