Why changing just the `sap.app/id` in the manifest.json causes app to crash?

I have a SAP CAP Full Stack app. I also have some custom UI5 code - XML Views and JS controllers.

Everything is working fine, but if I just change the sap.app/id section in the manifest.json file (changing from test.reporting.app to test.reporting.app.predev), I start to get errors when open the app in SAP Build Work Zone. The error is:

Error: resource test/reporting/app/view/App.view.xml could not be loaded from https://sapui5.hana.ondemand.com/1.123.2/resources/test-reporting-app/view/App.view.xml. Check for 'file not found' or parse errors.

What is strange is; when I locate the app in the HTML5 Applications in the BTP Cockpit, and open it, it loads just fine. So only when I open the app in SAP Build Work Zone, the error is reported.

Note: After the deployment, I did the update/reload of the content of the HTML5 Apps in the SAP Build Work Zone.

Any ideas why just changing the sap.app/id caused this error?

This is my manifest.json:

{
  "_version": "1.49.0",
  "sap.app": {
    "id": "test.reporting.app.predev",
    "type": "application",
    "...": "..."
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "test.reporting.app.view.App",
      "type": "XML",
      "async": true,
      "id": "app"
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML", 
        "path": "test.reporting.app.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "async": true
      },
      "..." "..."
    },
    "...": ".."
  }
}

According to the description of the /sap.app/id section from the documentation Manifest (Descriptor for Applications, Components, and Libraries):

A mandatory attribute that has to be provided in dot notation [...] must be unique in the system. It must match the namespace provided in the corresponding Component.js.

The last sentence is the most important remark here. I.e. changing the id value e.g. from "test.reporting.app" to "test.reporting.app.predev" requires also adding .predev or /predev everywhere in your project.

For example:

• In Component.js:

  return UIComponent.extend("test.reporting.app.predev.Component", {/*...*/});

• In manifest.json sections:*

  "sap.app": {
    "id": "test.reporting.app.predev",
    "i18n": {
      "bundleName": "test.reporting.app.predev.i18n.i18n"
      ...
  
  "sap.ui5": {
    "rootView": {
      "viewName": "test.reporting.app.predev.view.App"
      ...
  
    "models": {
      "i18n": {
        "bundleName": "test.reporting.app.predev.i18n.i18n"
        ...
  
    "config": {
      "path": "test.reporting.app.predev.view"

• In View definitions:

  <mvc:View controllName="test.reporting.app.predev.controller.MyView"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
  >
    <mvc:XMLView viewName="test.reporting.app.predev.view.MyNestedView" />
    <core:Fragment fragmentName="test.reporting.app.predev.view.MyFragment" />

• In module definitions:

  sap.ui.define([
    "test/reporting/app/predev/MyModuleA",
      
    // ...
      
    return MyModuleA.extend("test.reporting.app.predev.MyModuleB", {/*...*/});

• In UI5 Tooling files (ui5*.yaml):

  metadata:
    name: test.reporting.app.predev

• More files in your project / system to match ...

To answer the question: missing the above corrections will cause your app resources such as the view/App.view.xml to load based on the default URL prefix, which is the standard SAPUI5 resource path (The baseUrl in sap.ui.loader.config).

^{* The /sap.ui5/componentName, if it exists, should still refer to the ID of the base app.}