Update to Angular 13.3.0

CHANGELOG.md

@@ -32,6 +32,7 @@
 - inf-terraform-aws: Update versions for ruby, terraform, kitchen-terraform, Gemfile ([#677](https://github.com/opendevstack/ods-quickstarters/issues/677))
 - jupyter lab: reduction to a minimal initial env ([#710](https://github.com/opendevstack/ods-quickstarters/issues/710))
 - upgrade python flask quickstarter to Flask 2 version and general dependencies upgrades ([#746](https://github.com/opendevstack/ods-quickstarters/issues/746))
+- update fe-angular to Angular 13.3.0 ([#765](https://github.com/opendevstack/ods-quickstarters/issues/765))
 
 ## [4.0] - 2021-11-05
 

docs/modules/quickstarters/pages/fe-angular.adoc

@@ -17,12 +17,6 @@ User this is a Angular project quickstarter if you want to build a frontend. It
 ├── docker - This folder contains Docker configuration settings
 │   ├── Dockerfile
 │   └── nginx.vh.default.conf.nginx
-├── e2e
-│   ├── protractor.conf.js
-│   ├── src
-│   │   ├── app.e2e-spec.ts
-│   │   └── app.po.ts
-│   └── tsconfig.json
 ├── karma.conf.js
 ├── package-lock.json - It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
 ├── package.json - This file contains scripts to run and node packages dependencies for project
@@ -49,7 +43,6 @@ User this is a Angular project quickstarter if you want to build a frontend. It
 ├── tsconfig.app.json
 ├── tsconfig.json
 ├── tsconfig.spec.json
-├── tslint.json
 ----
 
 == Frameworks used
@@ -80,7 +73,7 @@ version: 1.0.1
 type: ods
 role: frontend
 runtime: angular-cli
-runtimeVersion: 8.0.3
+runtimeVersion: 13.3.0
 ```
 
 == How this quickstarter is built through Jenkins
@@ -89,11 +82,12 @@ The build pipeline is defined in the `Jenkinsfile` in the project root. The main
 
 * stageBuild - Builds the application by running `npm install`, `npm run build` command and copies output folder `dist` into `docker/dist` folder.
 * stageUnitTest - Runs unit test cases by executing command `npm run test`. This will also create test coverage analysis data which will then be transfered to SonarQube during odsComponentStageScanWithSonar
-* stageLint - Runs `ng lint` profiler by running command `npm run lint`.
 * odsComponentStageScanWithSonar - Triggers a code quality analysis by transfering code and test coverage analysis data to SonarQube. By default files like `*.spec.ts`, `*.modules.ts` and `src/environments/**` are excluded from the analysis, since they usually don't contain logic. Please revisit `sonar-project.properties` to configure analysis inclusions and exclusions according to your project's needs.
 
 Please note: By default the applciation is always build as full production build including all sorts of optimizations. In addition source maps will be added except for builds that are triggered from `master`. This can be changed by configuring (additional) build configurations within `angular.json` and by using them via stageBuild or `package.json`.
 
+Please note: The support for *TSLint* has been removed from this quickstarter. Also Angular is not shipping a linter by default anymore. Please consider adding *ESLint* support or a formatter like *Prettier*. For adding ESLint simply type `ng add @angular-eslint/schematics`. For setting up Prettier please see https://prettier.io/docs/en/install.html.
+
 == Builder agent used
 
 This quickstarter uses

fe-angular/Jenkinsfile

@@ -14,7 +14,7 @@ node {
 
 library("ods-jenkins-shared-library@${sharedLibraryRef}")
 
-def angularCliVersion = "8.0.3"
+def angularCliVersion = "13.3.0"
 
 odsQuickstarterPipeline(
   imageStreamTag: "${odsNamespace}/jenkins-agent-nodejs12:${agentImageTag}",

fe-angular/Jenkinsfile.template

@@ -37,9 +37,3 @@ def stageUnitTest(def context) {
     sh 'npm run test'
   }
 }
-
-def stageLint(def context) {
-  stage('Lint') {
-    sh 'npm run lint'
-  }
-}

fe-angular/files/docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.20.1-alpine
+FROM nginx:1.21.6-alpine
 
 RUN chmod -R 777 /var/log/nginx /var/cache/nginx /var/run \
      && chgrp -R 0 /etc/nginx \

fe-angular/init.sh

@@ -18,14 +18,19 @@ while [[ "$#" > 0 ]]; do case $1 in
 esac; shift; done
 
 echo "generate project"
-ng new $COMPONENT --style=scss --skip-git --skip-install
+ng new $COMPONENT --style=scss --skip-git --skip-install --defaults
 
 cd $COMPONENT
 
-echo "Configure headless chrome in karma.conf.j2"
+echo "add additional task parameters to package.json"
+sed -i "s|\"test\": \"ng test\"|\"test\": \"ng test --watch=false --code-coverage --reporters=junit,coverage\"|" ./package.json
+
+echo "add required plugins to package.json"
+sed -i "s|\"typescript\"|\"karma-junit-reporter\": \"^1.2.0\",\n    \"typescript\"|" ./package.json
+
+echo "configure headless chrome in karma.conf.js"
 read -r -d "" CHROME_CONFIG << EOM || true
     browsers: \['ChromeNoSandboxHeadless'\],\\
-\\
     customLaunchers: {\\
       ChromeNoSandboxHeadless: {\\
         base: 'Chrome',\\
@@ -43,57 +48,23 @@ EOM
 sed -i "s|\s*browsers: \['Chrome'\],|$CHROME_CONFIG|" ./karma.conf.js
 sed -i "s|\(browsers:\)|    \1|g" ./karma.conf.js
 
-echo "Configure required plugins in karma.conf.js"
+echo "configure required plugins in karma.conf.js"
 sed -i "/plugins: \[/a\     \ require('karma-junit-reporter')," ./karma.conf.js
 
-echo "Configure junit xml reporter in karma.conf.js"
+echo "configure junit xml reporter in karma.conf.js"
 read -r -d "" UNIT_XML_CONFIG << EOM || true
-    reporters: \['progress', 'junit', 'kjhtml'\],\\
-\\
     junitReporter: {\\
       outputDir: './build/test-results/test',\\
       outputFile: 'test-results.xml',\\
       useBrowserName: false,\\
       xmlVersion: 1\\
-    },
+    },\\
+    reporters: \['progress', 'kjhtml'\],
 EOM
-sed -i "s|\s*reporters: \['progress', 'kjhtml'\],|$UNIT_XML_CONFIG|" ./karma.conf.js
-
-echo "Configure headless chrome in protractor.conf.js"
-read -r -d '' PROTRACTOR_CONFIG << EOM || true
-    'browserName': 'chrome',\\
-    'chromeOptions': {\\
-      'args': \[\\
-        'headless',\\
-        'no-sandbox',\\
-        'disable-web-security'\\
-      \]\\
-    },
-EOM
-
-sed -i "s|\s*'browserName': 'chrome'|$PROTRACTOR_CONFIG|" ./e2e/protractor.conf.js
-sed -i "s|\('browserName'\)|    \1|g" ./e2e/protractor.conf.js
+sed -i "s|\s*reporters: \['progress', 'kjhtml'\],|    $UNIT_XML_CONFIG|" ./karma.conf.js
 
-echo "fix nexus repo path"
-repo_path=$(echo "$GROUP" | tr . /)
-sed -i.bak "s|org/opendevstack/projectId|$repo_path|g" $SCRIPT_DIR/files/docker/Dockerfile
-rm $SCRIPT_DIR/files/docker/Dockerfile.bak
+echo "configure coverage reporter in karma.conf.js"
+sed -i "s|{ type: 'text-summary' }|{ type: 'lcovonly' },\n        { type: 'text-summary' }|" ./karma.conf.js
 
-# The following commands copy custom files over the generated ones from the call
-# of "ng new" above. The custom files were created based on the generated ones
-# and the following changes:
-#   - package.json:
-#       - replaced value of "name" with placeholder "$COMPONENT"
-#       - added parameters to the commands in "scripts"
-#       - added "devDependencies" for "rxjs-tslint" and "tslint-sonarts"
-#   - tslint.json:
-#       - added linter rules from "rxjs-tslint" and "tslint-sonarts"
-#       - explicitly mention or disable some of the stricter SonarQube rules:
-#         "cognitive-complexity", "no-commented-code", "no-duplicate-string"
-#
-# Please note: When updating to a newer Angular version, please update those files accordingly.
 echo "copy custom files from quickstart to generated project"
-rm ./package.json
-rm ./tslint.json
 cp -rv $SCRIPT_DIR/files/. .
-sed -i "s/\$COMPONENT/${COMPONENT}/" ./package.json