Cumulocity Custom Angular Application Development

Knowledge Base
,
1

Introduction

This tutorial describes how to develop pure angular application using c8y/client and deploy to cumulocity tenant.

Prerequisite

Install Angular CLI

  • npm install -g @angular/cli will install the angular cli on your system

1049×204 10.4 KB

Develop the angular project

  • ng new < projectname > - this command will create a new project.
    • Angular Routing can be selected Yes or No based on your requirement. More details on angular routing can be found here.
    • You can select the type of stylesheet you require.

    695×166 9.54 KB
  • npm install @c8y/client - Navigate to the newly created project and execute this command to install c8y/client modules to the project

    • 1407×367 18 KB
  • ng serve - use this command to start running the project on localhost.

Cumulocity Specific Development

  • Add proxy details

    • Create a file named proxy.conf.json and add it to the project within src folder. The file content is as below

      {
"/": {
"target": "<your cumulocity tenant name>" ,
"secure": false,
"changeOrigin": true,
"logLevel": "info"
 }
}

    • Modify the file angular.json, add reference to the newly created proxy file

    579×286 6.72 KB

  • For demo purpose, you can add cumulocity authentication details to app.module.ts file. In production application, authentication has to be implemented seperately.

    • 815×178 6.66 KB
  • app.component.ts - add the custom code to this file based on your requirement. The below example is to list all the device managed objects.
    • 1497×453 23.8 KB
  • app.component.html - add your UI related code here. The below example is to print the managed object details.
    • 741×129 5.09 KB
  • ng build --href-base /apps/< your app name >/
    • This command will build the application and a new folder named dist will be created within the project with all the files required to deploy the application.
    • Create a file named cumulocity.json. The content of this file can be simple as below
      • 1569×229 7.93 KB
    • Place the cumulocity.json file within the dist/< yourapp > folder.
    • Zip the contents within the dist/< yourapp > folder.

Angular application upload

  • Upload the zip file to your cumulocity tenant under Administration -> Own Application -> upload web application
    • 524×501 13.7 KB
  • Your newly deployed application will be available in the app switcher.
3 Likes
2

There is a typo in the build step of this guide. It should be:

ng build --href-base /apps/<your-app>/
1 Like
3

Thanks for pointing it out Lucas, the article has been updated.