IT-SDK-Angular

Web-Links

• Angular E2E Testing: Protractor is dead, long live Cypress! https://www.youtube.com/watch?v=-lWY0X-ybME
• https://nodejs.org/de/docs/guides/nodejs-docker-webapp/
• web-src: https://angular.io/docs
• Web-src: https://angular.io/cli/generate
• web-src: https://mherman.org/blog/dockerizing-an-angular-app/
• web-src: https://malcoded.com/posts/angular-docker/
• web-src: https://www.whitehorses.nl/blog/running-angular-application-docker-dummies
• web-src: https://www.attosol.com/npm-notes-tips-tricks/
• Angular requires Node.js version 10.9.0 or later.

Setting

$ npm config get userconfig
$ npm config list
...
$ npm config set registry "http://registry.npmjs.org/"
$ npm config set http_proxy "127.0.0.0"
$ npm config set https_proxy "127.0.0.0"
$ npm config set noproxy "127.0.0.0"
$ npm config set strict-ssl false

Setting Protractor

$ npm install -g protractor
$ webdriver-manager update --ignore_ssl --versions.chrome=77.0.3865.120 --proxy $HTTP_PROXY

Angular-CLI (ng) Options

new    : Greate new workspace.
build  : Compiles the app.
serve  : Builds and Serves the app.
deploy : Invokes the builder for a specified project.

Life-Cycle: ng

$ npm install -g @angular/cli     # Install Angular CLI
$ ng new angular-app
$ ng serve --open --port 4321     # Run the application on port 4321 and open

$ del package-lock.json
$ npm cache clear --force
$ npm config set registry http://registry.npmjs.org/

Docker-File

Basic

FROM node:11.6.0-alpine AS builder
COPY . ./angular-app
WORKDIR /angular-app
RUN npm install
RUN $(npm bin)/ng build --prod

FROM nginx:1.15.8-alpine
COPY --from=builder /angular-app/dist/angular-app/ /usr/share/nginx/html

With QA

FROM node:12.2.0 as build
#------------------------------
# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable
#------------------------------
WORKDIR /app                           # set working directory
ENV PATH /app/node_modules/.bin:$PATH  # add `/app/node_modules/.bin` to $PATH
#--------------------------------------# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@7.3.9
COPY . /app
# run tests
RUN ng test --watch=false
RUN ng e2e --port 4202
# generate build
RUN ng build --output-path=dist
############
### prod ###
############
FROM nginx:1.16.0-alpine
# copy artifact build from the 'build environment'
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80                            # expose port 80
CMD ["nginx", "-g", "daemon off;"]   # run nginx

Docker-CMD

$ docker build -t angular-docker .
$ docker run -d -p 80:80 --env BACKEND_API_URL=yourApiUrl --env DEFAULT_LANGUAGE=de angular-docker