exp-frontendlib v0.0.4

ExpFrontendlib

this lib holds the shared Components for the ExPlanner Frontend and the global styles.

import the global CSS

to import the global css in another angular app: go to 'angular.json' and edit "styles":

Configure GitLab Package Registry

Create GitLab Access Token

The access token will be needed to pull packages from our registry. To generate a Token with !api access! see AccessTokenhttps://docs.gitlab.com/ee/user/profile/personal_access_tokens.html#create-a-personal-access-token save the token in keypass or so, you only see it once.

Configure npm

Setup URL for Instance Level

npm config set @artemgmbh:registry https://gitlab.com/api/v4/packages/npm/

npm config set -- '//gitlab.com/api/v4/packages/npm/:_authToken' "<your_token>"

Set URL for your scoped packages.

For example package with name '@artemgmbh' will use this URL for download

npm config set @artemgmbh:registry https://gitlab.com/api/v4/projects/32890180/packages/npm/

Add the token for the scoped packages URL. Replace <your_project_id> with the project where your package is located.

npm config set -- '//gitlab.com/api/v4/projects/32890180/packages/npm/:_authToken' "<your_token>"

build and deploy the library

1. Build the patched library in order to create the final dist folder

   ng build <library-name>

2. go to your newly builded dist/libraryName folder in the terminal and excecute:

   npm publish

since earlier we connected our Gitlab accesstoken to our project, we are able to publish it directly to gitlab (npm is also possible)

ExP-ApiClient

The ApiClient works a bit different than a normal Angular Library following are the steps for Generating, Building and Publishing.

Generate ApiClient

Following are the steps to generate a new version of the api client

1. Get the latest api-file as yaml or json & save it as explanner_api-docs.json
2. Run the generator command either with openapi cli or .jar - increase version parameter!

• CLI:

openapi-generator generate -g typescript-angular -i explanner_api-docs.json -o <AbsolutePathOnMaschine>/exp-frontendlib/projects/exp-apiclient

• .JAR:

java -jar openapi-generator-cli-4.3.1.jar generate -g typescript-angular -i explanner_api-docs.json -o ./projects/exp-apiclient

Necessary changes after generation

in the package.json change following properties:

1. in "publishConfig": "registry" => "@artemgmbh:registry":
2. remove "license": "Unlicense" & "keywords": ... & "author": "OpenAPI-Generator Contributors",
3. fix possible compile errors

Build ApiClient

npm run build:exp-apiclient

Publish ApiClient

Reminder Increase Version in package.json! If the version is not increased npm publish will fail, because the version already exists.

Run following command in the terminal:

npm publish projects/exp-apiclient/dist

ApiClient Usage

For more information on how to use the ApiClient in Angular apps see the ReadMe in ApiClient.

• ApiClient-Readme

Testing a Library localy

In order to test a library locally we need to create an npm link. follow the steps below to localy link the library to your project:

1. Build the liblary which will be linked with the --watchoption so the build automatically gets updated each time something changes

ng build <lib-name> --watch

2. In the project which uses the library remove the lib from node-modules folder. for example: node_modules/@artemgmbh/exp-apiclient
3. Make sure the preserveSymlinks flag is set to truein the angular.jsonfile.
4. Now create the symlink to the library. In your project run following command:

npm link ../<path to dist/library/>

When the changes to library are completed. Build and Publish the new version of the library.

After testing the library we need to remove the symlink (The link is only for testing purpose)

1. Remove the locally linked library from node-modules
2. Unlink the library with

npm unlink ../<path to dist/library/>

3. Update the Version of the library in package.json
4. Run

npm install