Nested Component Projects: Component-preload.js files are not generated

[BenReim]

Expected Behavior

When running a preload-build, Component-preload.js files should be generated for each Component.js file within an ui5 app project.

Current Behavior

In UI5 App Projects that contain component files, a Component-preload.js file is only generated for the root level Component.js files. For any other Component.js files that are placed in subfolders within the project, debug sources – yet no preload files - are currently being generated. This leads to 404 requests during runtime such as:

ui5loader-dbg.js GET https://**/Component-preload.js 404

Steps to reproduce the issue

1. Clone the openui5-sample app

2. Within the webapp directory, create a sub folder and add a Component.js file and some basic content

3. Build the projects ui5 build --a

4. A preload file has only been generated for the top-level Component.js file

Affected components

• [X] ui5-builder
• [ ] ui5-server
• [ ] ui5-cli
• [ ] ui5-fs
• [ ] ui5-project
• [ ] ui5-logger

[RandomByte]

A feature for this has already been implemented with https://github.com/SAP/ui5-builder/pull/6. Yet we still have to add documentation for this 😑

Closing as duplicate of https://github.com/SAP/ui5-builder/issues/202

[BenReim]

@RandomByte thanks for elaborating. I think my question refers more to the current default behavior of the ui5-builder rather than any custom configuration of it.

I now understood that by default only a single Component-preload.js file will be created that will include any nested component within the application project. Still in this case two questions come to my mind:

• Why are still Component-dbg.js files created for each nested Component file?

• Since the root Component-preload.js file includes nested Component files, those should be known to the UI5 instance after an initial load of a project’s root Component-preload.js file.
  Therefore, when such a Component is being loaded at run time (e.g. through sap.ui.core.ComponentContainer) I would expect that no further network calls are made to retrieve a nested component. However, it seems that UI5 does still try to request preload files for such nested Component, which then result in a 404 response.

[codeworrior]

This indeed should not be the case. The runtime checks whether the corresponding Component.js module has been loaded (or preloaded) before requesting the Component-preload.js.

If you still see requests, then something goes wrong with the check here.

Is there anything special about the namespace of the nested component?

[BenReim]

@codeworrior Thanks for the info. I’ll see if I can create a nested component sample where the described behavior occurs.

[codeworrior]

Reopened to clarify whether the expected behavior is not met.

[BenReim]

Hello, I believe the issue to arise when a resource mapping is being used.

I have created an example where the issue can be reproduced: https://github.com/BenReim/UI5Lab-app-simple/tree/component-load-issue

[ThePlenkov]

Hi! I have absolutely same issue. I have an app which is in fact a set of 3 different Components.

I see in the comment that the issue was resolved by builder configuration but even that is quite difficult to understand. @codeworrior @matz3 Do you guys have some example how we can build preload modules for subcomponents? Thank you!

I also have to notice the old grunt builder was able to to do this quite easily.

[ThePlenkov]

@BenReim could you please clone this https://github.com/ThePlenkov/UI5Lab-app-simple/tree/component-load-issue

and try

grunt build

[github-actions[bot]]

This issue has been automatically marked as stale because it has been open for 60 days with no activity. It will be closed in 10 days if no further activity occurs.

[RandomByte]

The issue can still be reproduced as described in Benjamin's repository

@ThePlenkov I know your question is old, but here's the documentation on configuring preloads for subcomponents, including examples: https://sap.github.io/ui5-tooling/pages/Configuration/#component-preload-generation

[RandomByte]

Hey @BenReim, sorry for the delay. We just had another look at this issue and found that there is a mismatch in the component names that prevents this from working as expected.

The component at webapp/routes/child1/Component.js is missing the "routes" path segment in it's name:

return UIComponent.extend("ui5lab.app.GeometryApp.child1.Component", {

After changing this to ui5lab.app.GeometryApp.routes.child1.Component and updating all other references, the loader will use the bundled resource from Component-preload.js as expected.

Note that our loader does not use the resourceroots mapping defined in the index.html for this kind of resolution. Therefore the component name must match the path in the bundle.