diff --git a/CHANGELOG.md b/CHANGELOG.md index 287520857..1db8386df 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/modules/quickstarters/pages/fe-angular.adoc b/docs/modules/quickstarters/pages/fe-angular.adoc index 4da8a399c..1ff2f2061 100644 --- a/docs/modules/quickstarters/pages/fe-angular.adoc +++ b/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 diff --git a/fe-angular/Jenkinsfile b/fe-angular/Jenkinsfile index 84f6425ec..639aa8904 100644 --- a/fe-angular/Jenkinsfile +++ b/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}", diff --git a/fe-angular/Jenkinsfile.template b/fe-angular/Jenkinsfile.template index fa1823b26..692af8641 100644 --- a/fe-angular/Jenkinsfile.template +++ b/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' - } -} diff --git a/fe-angular/files/docker/Dockerfile b/fe-angular/files/docker/Dockerfile index 7b93e09bc..0968a45c0 100644 --- a/fe-angular/files/docker/Dockerfile +++ b/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 \ diff --git a/fe-angular/files/package.json b/fe-angular/files/package.json deleted file mode 100644 index 0e0740426..000000000 --- a/fe-angular/files/package.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "name": "$COMPONENT", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build --prod --build-optimizer --progress=false", - "test": "ng test --watch=false --progress=false --code-coverage --reporters=junit", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "private": true, - "dependencies": { - "@angular/animations": "~8.0.1", - "@angular/common": "~8.0.1", - "@angular/compiler": "~8.0.1", - "@angular/core": "~8.0.1", - "@angular/forms": "~8.0.1", - "@angular/platform-browser": "~8.0.1", - "@angular/platform-browser-dynamic": "~8.0.1", - "@angular/router": "~8.0.1", - "rxjs": "~6.4.0", - "tslib": "^1.9.0", - "zone.js": "~0.9.1" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~0.800.0", - "@angular/cli": "~8.0.3", - "@angular/compiler-cli": "~8.0.1", - "@angular/language-service": "~8.0.1", - "@types/node": "~8.9.4", - "@types/jasmine": "~3.3.8", - "@types/jasminewd2": "~2.0.3", - "codelyzer": "^5.0.0", - "jasmine-core": "~3.4.0", - "jasmine-spec-reporter": "~4.2.1", - "karma": "~4.1.0", - "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "~2.0.1", - "karma-jasmine": "~2.0.1", - "karma-jasmine-html-reporter": "^1.4.0", - "karma-junit-reporter": "^1.2.0", - "protractor": "~5.4.0", - "ts-node": "~7.0.0", - "tslint-sonarts": "^1.9.0", - "tslint": "~5.15.0", - "typescript": "~3.4.3" - } -} diff --git a/fe-angular/files/tslint.json b/fe-angular/files/tslint.json deleted file mode 100644 index e41472f90..000000000 --- a/fe-angular/files/tslint.json +++ /dev/null @@ -1,105 +0,0 @@ -{ - "extends": ["tslint:recommended", "tslint-sonarts"], - "rules": { - "array-type": false, - "arrow-parens": false, - "deprecation": { - "severity": "warn" - }, - "cognitive-complexity": false, - "component-class-suffix": true, - "contextual-lifecycle": true, - "directive-class-suffix": true, - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ], - "import-blacklist": [ - true, - "rxjs/Rx" - ], - "interface-name": false, - "max-classes-per-file": false, - "max-line-length": [ - true, - 140 - ], - "member-access": false, - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-commented-code": false, - "no-consecutive-blank-lines": false, - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-duplicate-string": false, - "no-empty": false, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-non-null-assertion": true, - "no-redundant-jsdoc": true, - "no-switch-case-fall-through": true, - "no-use-before-declare": true, - "no-var-requires": false, - "object-literal-key-quotes": [ - true, - "as-needed" - ], - "object-literal-sort-keys": false, - "ordered-imports": false, - "quotemark": [ - true, - "single" - ], - "trailing-comma": false, - "no-conflicting-lifecycle": true, - "no-host-metadata-property": true, - "no-input-rename": true, - "no-inputs-metadata-property": true, - "no-output-native": true, - "no-output-on-prefix": true, - "no-output-rename": true, - "no-outputs-metadata-property": true, - "template-banana-in-box": true, - "template-no-negated-async": true, - "use-lifecycle-interface": true, - "use-pipe-transform-interface": true, - "variable-name": { - "options": [ - "ban-keywords", - "check-format", - "allow-leading-underscore", - "allow-pascal-case", - "allow-snake-case" - ] - } - }, - "rulesDirectory": [ - "codelyzer" - ] -} - diff --git a/fe-angular/init.sh b/fe-angular/init.sh index aa5b0bb9f..b31b92d88 100644 --- a/fe-angular/init.sh +++ b/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 paramters 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