# Cumulocity Custom Angular Application Development

**URL:** <https://community.cumulocity.com/t/cumulocity-custom-angular-application-development/665>\
**Category:** Knowledge Base\
**Tags:** Angular, custom-application, cumulocity\
**Created:** [October 8, 2020, 9:00pm UTC](https://community.cumulocity.com/t/cumulocity-custom-angular-application-development/665 "2020-10-08T21:00:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![NagendraMS](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/nagendrams/32/3361_2.png) [@NagendraMS](https://community.cumulocity.com/u/NagendraMS)\
**Post date:** [October 8, 2020, 9:00pm UTC](https://community.cumulocity.com/t/cumulocity-custom-angular-application-development/665/1 "2020-10-08T21:00:00Z")

</div>

## Introduction

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

## Prerequisite

- Create a new tenant: [https://cumulocity.com/try-for-free/](https://cumulocity.com/try-for-free/)
- Any IDE like Visual Studio Code or commandline tool to access terminal

## Install Angular CLI

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

  
 ![](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/a/2/a2f7deda4f1d4273a40ce8041cde889a6468155d.png)
## 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](https://angular.io/guide/router).
  - You can select the type of stylesheet you require.

  
 ![](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/c/7/c744d606414e7504ffd05b7030d2305264d1aec2.png)
- npm install @c8y/client - Navigate to the newly created project and execute this command to install c8y/client modules to the project
  
 ![](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/9/6/961fd24340b7dfe313d30a73f5fa82752c54a055.png)- ng serve - use this command to start running the project on localhost.
  - You can navigate to [http://localhost:4200/](http://localhost:4200/) to verify if the angular application is running

## Cumulocity Specific Development

- Add proxy details

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

 ![](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/f/c/fc6fb36fbaa5cdad8c4defcd616fed151e2f0983.png)- 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.
 ![](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/a/0/a08c47b409889ad3fb92fe6ca9ab91e7da87962e.png)- app.component.html - add your UI related code here. The below example is to print the managed object details. 
 ![](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/c/4/c4d4179352290b77985292fab74f430cac98b436.png)- 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
 ![](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/b/8/b84d4c394da9be1cf53039e920d2dce8a68fbdfb.png) - 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
 ![](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/a/9/a9ee5070ebe3842625b4eb25ee2c2e0347a1bdeb.png)- Your newly deployed application will be available in the app switcher.

---

<div class="post-metadata">

**Author:** ![luclib](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@luclib](https://community.cumulocity.com/u/luclib)\
**Post date:** [August 18, 2023, 2:51pm UTC](https://community.cumulocity.com/t/cumulocity-custom-angular-application-development/665/2 "2023-08-18T14:51:03Z")

</div>

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

```auto
ng build --href-base /apps/<your-app>/

```

---

<div class="post-metadata">

**Author:** ![NagendraMS](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/nagendrams/32/3361_2.png) [@NagendraMS](https://community.cumulocity.com/u/NagendraMS)\
**Post date:** [August 26, 2023, 3:10pm UTC](https://community.cumulocity.com/t/cumulocity-custom-angular-application-development/665/3 "2023-08-26T15:10:54Z")

</div>

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