Angular Application not displaying on Cumulocity

I have been following this guide to deploy an angular application directly to my Cumulocity tenant. I have not modified the default html template of my app component since I just want to test if I can get the application to display.

I have been able to add the c8y/client package and build the application without any errors.
However, after uploading the application zip folder via the Administration > Applications portal and opening my application, I get a blank page with a 404 error message.

The guide is dated to October, 2020, and I am wondering if it outdated or not or if I might have made a mistake in one of the steps.

Hi Lucas,

In general these instructions should still be valid.
Can you list the files that are in the root of your zip file?
It should contain the cumulocity.json and index.html along with further files in the root of the zip file.

You can check the zip file attached here for a minimal web application that you should be able to upload to Cumulocity.

Regards,
Tristan

Hi Tristan,

Here are the contents of my project file after building it and inserting the cumulocity.json file:
image

I have copied the exact contents from the JSON file your link pointed to me too but I am still getting the same result:

{
    "author": "Lucas Liberman",
    "name": "pure-ng-app",
    "version": "1.0.0",
    "description": "This is a sample app to demonstrate how to upload any none WebSDK based web application to Cumulocity.",
    "contextPath": "app",
    "key": "app-application-key"
 }

What exactly do you zip? Note that it should be the contents of your pure-ng-app-test folder (not the folder as a whole), so that these files are in really the root of the zip file.

1 Like

I zipped the folder that was created inside the dist folder after running ng build.

Hi Lucas,

As described in the guide you’ve linked and also in the answer from @Korbinian_Butz : You need to zip the contents of dist/pure-ng-app-test instead of zipping the pure-ng-app-test folder.
If you think you already did so, please provide a screenshot of the file structure of the opened zip file.
On Windows this should look somehow like this with probably a few more files:
image

The important part is, that both the cumulocity.json and the index.html are in the root of the zip file.

Also feel free to send the application via PN to me and I will have another look.

Regards,
Tristan

Hi Tristan,

My apologies, I see what you mean now. I zipped the contents from the dist folder as opposed to the dist folder itself. I can upload the application now and I no longer get the 404 error message.

The application does not display anything, however, only a blank pace. But, then again, I have not experimented with just adding my own html code. I will let you know if I encounter further difficulties.

Thank you as always,

Lucas

P.S.: What is PN?

Hi Lucas,

You might need to adapt the base href of your application to match /apps/<application-context-path>/. The <application-context-path> should match whatever you have specified as contextPath in your cumulocity.json.

PN was a typo I meant PM for private message.

Regards,
Tristan

Hi Lucas,

PN stands for “Personal Note”, but should have been PM for “Personal Message”.
This can be done in the Community Forum by clicking on the bullet left to the name (or the name itself) and on the users overview page you will find a “Message” button.

Regards,
Holger

1 Like

Quick update: I solved the problem by modifying the build instruction. The original guide forgot to add an extra / in his step.

ng build --base-href /apps/<app-name>/
2 Likes

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.