How to resolve SAP UI5 error message - Could not find any translatable text for key appTitle

problem symptoms

See the following error message in the console panel of Chrome Developer Tools:

Assertion failed: Could not find any translatable text for key ‘appTitle’ in bundle file(s)

Clicking on assert-dbg.jsthe hyperlink takes you to the code where the line of error message was thrown:

Set a breakpoint, wait for the breakpoint to stop, observe the context of the call stack, and notice that the file corresponding to this Resource Bundle can be found inside the internally ResourceBundle.getTextwritten by our application :locate-reuse-libs.jsi18n/i18n.properties

In the network panel of the Chrome developer tool, it is observed that the file is not loaded successfully, and a 404 error is returned:

For more information about i18n.propertiesthe file, you can refer to the author's tutorial:

• SAP UI5 Application Development Tutorial Eight - Multilingual Support

In the SAP UI5 application, there is usually a folder named "i18n", which contains one or more ".properties" files, which are used to store text information in different locales. The default language file is usually named "i18n.properties", while other locale files will be appended with the corresponding language and country code, such as "i18n_zh_CN.properties", "i18n_de_DE.properties" and so on.

In the "i18n.properties" file, you can define some key-value pairs, each key corresponds to a specific text message. The key is unique and the value is the text corresponding to the locale. For example:

welcomeMessage = Welcome to our application!

In the "i18n_zh_CN.properties" file, you may have:

welcomeMessage = 欢迎使用我们的应用程序！

Using these messages in SAP UI5 applications is very simple. First, you need to initialize a object in your view or controller sap.ui.model.resource.ResourceModel, then set the model as your view or application model. For example:

var i18nModel = new sap.ui.model.resource.ResourceModel({
    
    
    bundleName: "my.app.i18n.i18n"
});
this.getView().setModel(i18nModel, "i18n");

Once you set up the model, you can use in your view or controller {i18n>welcomeMessage}to refer to the message. This way, no matter what locale your users are using, they will see the corresponding welcome message.

Another common usage scenario is to get these messages in JavaScript code. You can use ResourceModelthe getResourceBundlemethod to get a resource bundle (Resource Bundle), and then use getTextthe method of this resource bundle to get a specific message. For example:

var i18nModel = this.getView().getModel("i18n");
var resourceBundle = i18nModel.getResourceBundle();
var welcomeMessage = resourceBundle.getText("welcomeMessage");

SAP UI5 will automatically select the correct ".properties" file according to the user's locale. If the corresponding file cannot be found, or if a specific key is not found in the corresponding file, SAP UI5 will use the message from the "i18n.properties" file.

The benefits of using the "i18n.properties" file are obvious. First of all, this approach enables your application to be internationalized and can easily support multiple languages. Second, it separates your code from text messages, making your code easier to maintain.