helgoland-toolbox

tools for a sensor observation service based client

This project contains Angular based Modules, Components, Injectables to build a sensor observation service based client.

Getting Started

Dependencies

Node/NPM

Install latest Node and NPM following the instructions. Make sure you have Node version ≥ 7.0 and NPM ≥ 4.

• brew install node for Mac.

Yarn

Yarn package manager is optional but highly recommended. If you prefer to work with npm directly you may ignore this step.

Yarn installs library dependencies faster and also locks theirs versions. It has more advantages but these two are already pretty attractive.

Install Yarn by following the instructions.

• brew install yarn for Mac.

Installing

• fork this repository.
• clone your fork to your local environment.
• yarn install to install required dependencies (or npm i).

Build the library

• yarn build for building the library once (both ESM and AOT versions).
• yarn build:watch for building the library (both ESM and AOT versions) and watch for file changes.

You may also build UMD bundle and ESM files separately:

• yarn build:esm - for building AOT/JIT compatible versions of files.
• yarn build:esm:watch - the same as previous command but in watch-mode.
• yarn build:umd - for building UMD bundle only.
• yarn build:umd:watch - the same as previous command but in watch-mode.

Other commands

Lint the code

• yarn lint for performing static code analysis.

Test the library

• yarn test for running all your *.spec.ts tests once. Generated code coverage report may be found in coverage folder.
• yarn test:watch for running all you *.spec.ts and watch for file changes.

Generate documentation

• yarn docs for generating documentation locally.
• yarn gh-pages for generating documentation and uploading it to GitHub Pages. Documentation example.

Explore the bundle

• yarn explorer to find out where all your code in bundle is coming from.

Bump library version

• npm version patch to increase library version. More on bumping.

preversion script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing.

Publish library to NPM

• npm publish to publish your library sources on npmjs.com. Once the library is published it will be available for usage in npm packages.

prepublishOnly script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing.

Cleaning

• yarn clean:tmp command will clean up all temporary files like docs, dist, coverage etc.
• yarn clean:all command will clean up all temporary files along with node_modules folder.

Library development workflow

In order to debug your library in browser you need to have Angular project that will consume your library, build the application and display it. For your convenience all of that should happen automatically in background so once you change library source code you should instantly see the changes in browser.

There are several ways to go here:

• Use your real library-consumer project and link your library to it via yarn link command (see below).
• Use demo applications that are provided for your convenience as a part of this repository.
• Use Angular-CLI to generate library-consumer project for you and then use yarn link to link your library to it.

Using yarn link

In you library root folder:

# Create symbolic link
yarn link

# Build library in watch mode
yarn build:watch

In you project folder that should consume the library:

# Link you library to the project
yarn link "angular-library-seed"

# Build your project. In case of Angular-CLI use the following command.
ng serve --aot

Then you need to import your library into your project's source code.

Now, once you update your library source code it will automatically be re-compiled and your project will be re-built so you may see library changes instantly.

More information about yarn link command.

At the moment of publishing this project there is a bug exists when using yarn link in combination with Angular CLI. The issue is caused by having node_modules folder inside linked library. There is a workaround has been provided that suggests to add a paths property with all Angular dependencies to the tsconfig.json file of the Angular CLI project like it is shown below:

{
  "compilerOptions": {
    "paths": { "@angular/*": ["../node_modules/@angular/*"] }
  }
}

Troubleshooting while using this library

• add allowSyntheticDefaultImports: true to your tsconfig.json to avoid error messages like ... has no default export
• don't forget to add styles of nested dependencies