OASP4JS Angular Project Seed

Note

OASP has been superseded by devonfw, the Open Source Standard Software Development Platform for state of the art Cloud Native Micro Service and Multi Platform Rich Web Apps, supported by Capgemini. See http://devonfw.com and on Github http://github.com/devonfw Individual products within OASP have been renamed to a corresponding one in devonfw. For example: OAPS4j → devon4j OASP4js → devon4ng OASP4NET → devon4NET devonfw® is an exclusive and registered (European Trademark) product of Capgemini. Capgemini reserves all intellectual and industrial property rights over devonfw but publishes it under the Apache License, Version 2 – like OASP- which makes devonfw 100% Open Source. See: https://tldrlegal.com/license/apache-license-2.0-(apache-2.0)

This is an Angular Project Seed recommended by OASP4JS. The Project Seed is in fact a simple application built upon the Angular CLI.

See the sample app here.

We built also our Project Seed on top of Spring Boot. Check it out here!

Getting started

Install prerequisites

You need a Git client, the Node.js, the Yarn package manager and the Angular CLI to make use of the project seed. It is highly recommended to use the following versions:

• Node.js 6.9.5

• Yarn 0.21.3

• Angular CLI 1.1.0

Git

Check if you have a Git client already installed:

git --version

If your OS can not recognize this command, install Git. For details please refer to this page. When installing under Windows, please make sure you check the following option:

• ✓ Use git from Windows command prompt

Node.js

It is highly recommended to install the Node Version Manager which manages multiple active Node.js versions on your machine. The windows version of nvm can be found here.

Yarn

Having installed Node.js (using the Node Version Manager) you have also its package manager - npm installed which can be used to install Yarn:

npm install -g yarn

Please note that this is not the only possibility available. Please refer to the Yarn Installation Instructions for more details on other possibilities.

Angular CLI

Having installed Yarn you can install Angular CLI like this:

yarn global add @angular/cli

Run the application

Clone this repository:

git clone https://github.com/oasp/oasp4js-ng-project-seed.git

let Yarn to install all dependencies:

cd oasp4js-ng-project-seed
yarn

and start the application

ng serve

How we created the application

Angular CLI in action

The application was generated using the Angular CLI:

ng new oasp4js-ng-project-seed --style=scss --skip-install

Than we let Yarn to install all dependencies:

cd oasp4js-ng-project-seed
yarn

PhantomJS for headless tests

Angular CLI uses Chrome for running your tests. Although this is good during development, when running your tests in the Continuous Integration environment, you need a headless browser. These are steps we made to make your tests being executed against the PhantomJS browser:

Install the PhantomJS launcher for Karma

Use Yarn to install the PhantomJS launcher for Karma

yarn add karma-phantomjs-launcher

Update the Karma configuration file karma.conf.js:

...
plugins: [
  ...
  require('karma-phantomjs-launcher')
]
...

Enable (uncomment) all polyfills required for IE9, IE10 and IE11. Some of them are also needed by the PhantomJS (polyfills.ts):

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Typically the following command should be executed in the Continuous Integration environment:

ng test --single-run --code-coverage --browsers=PhantomJS

Install Bootstrap and ng-bootstrap

As a widget library we use Bootstrap. Its JavaScript part was rewritten in TypeScript as Angular directives by ng-bootstrap.

Use Yarn to install Bootstrap and ng-bootstrap:

yarn add bootstrap@next @ng-bootstrap/ng-bootstrap

Follow the ng-bootstrap installation instructions.

Make IE users happy

Specify the x-ua-compatible meta tag with edge mode. This will force Internet Explorer to render the webpage in the highest available mode (index.html):

<meta http-equiv="x-ua-compatible" content="ie=edge">