Agora Angular

This project was generated with Angular CLI version 9.1.1.

The code structure follows the main guidelines set in this article: https://medium.com/angular-in-depth/making-angular-project-mono-repo-with-ngrx-state-management-and-lazy-loading-3f09178319d4. The core app is the main git repo. The individual apps (ESP, Rod Pump, etc) and the libraries (core-ui, core-ngrx, etc.) are separate repos, linked to the main repo as submodules.

Setup

Clone the agora-angular-ui repo and the submodules git clone https://[email protected]/slb-digital/agora/_git/agora-angular-ui --recurse-submodules

Change to agora-angular-ui folder cd agora-angular-ui

Fetch latest versions of the submodules with git submodule update --remote

Run npm install

Each application is an Angular app (ESP, Rod-Pump). Common code goes in core libraries. So core-ui is an Angular library. New libraries can be generated using ng g library core-library. New apps can be generated using ng g application app-name. Make sure you select y for routing and SCSS for CSS.

Rules

Common modules must go into the core libraries (ngRX actions/reducers/effects for latest and historical data, UI widgets such as tree-view/historical chart, API service call to fetch latest and hsitorical data).

Use the new methods for creating ngRX components that reduce boilerplate code (https://ultimatecourses.com/blog/how-to-upgrade-your-angular-and-ngrx-apps-to-v8).

All UI layout must be done using CSS Grid or Flexbox.

All development must be done under feature branches for every repo. All changes to be merged to master branch using PRs for all repos.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files in the main app or the sub-apps. To reload on changing a library source code, you will need to first build the library (e.g. npm run build:core-ui), this will trigger app reload.

Code scaffolding

You can generate new components in subfolders for the libraries using the --project flag. Note: you can add --dry-run to try the command. Run ng generate component widgets/component-name --project core-ui to generate a new component for core-ui library under the widgets folder. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Build the Angular libs and apps using npm. Check package.json. For e.g run npm run build:core-ui.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Git submodules