Dashboard

Libraries

• Angular CLI
  • Run ng generate component component-name to generate a new component (you can also use ng generate directive|pipe|service|class|guard|interface|enum|module).
  • To get more help use ng help or go check out the Angular CLI README.
• Angular Material
• Prettier

Initialization

Install packages

npm ci

Generate Angular modules from swags

npm run codegen

Development server

• API (Production API default)

  • With mocks:

    Change ./src/appConfig.json API endpoints

1. Start

   • Real Keycloak: npm start

   • Stub Keycloak

     1. Change ./src/authConfig.json / "auth-server-url":

     2. npm run stub

2. Navigate to http://localhost:8000/

Production build

1. Run npm run build
2. The build artifacts will be stored in the dist/ directory.

Add API

1. Add submodule

   git submodule -b <SCHEME_BRANCH> add <SCHEME_REPO> schemes/<SCHEME_NAME>/<VER:VX>
   

2. Add schemes/<SCHEME_NAME>/<VER:VX> to Makefile SWAGGER_SCHEMES_PATH property

3. Add "<SCHEME_NAME>": "schemes/<SCHEME_NAME>/<VER:VX>" to swagger-codegen-config.json schemes property

4. Generate Angular modules from swags

5. Add "<SCHEME_NAME>Endpoint": "<URL>" to src/assets/appConfig.json api property

6. Add in src/api/<SCHEME_NAME> files:

   • index.ts
   • <SCHEME_NAME>.module.ts
   • <SCHEME_NAME>-config.service.ts

7. Add <SCHEME_NAME>.module.ts to src/app/api/api.module.ts imports

Tests

• Run npm run test to execute the unit tests via Karma.
• Run npm run e2e to execute the end-to-end tests via Protractor.

Utils

Analyze bundle size

npm run build -- --prod --stats-json --extraWebpackConfig webpack.extra.js
npx webpack-bundle-analyzer dist/stats.json

Guides

• Using typography
• Theming your components