Commit a2905139 authored by Yann D'Isanto's avatar Yann D'Isanto Committed by Pierre Smeyers
Browse files

feat: support Angular 14 

BREAKING CHANGE: in a multi module project, now the template build all projects by default (still customizable)
parent 51ad04b3

README.md

+14 −10
Original line number Diff line number Diff line
@@ -48,9 +48,9 @@ for jobs dependency reasons (some jobs such as SONAR analysis have a dependency 
Those stage are bound to the `build` stage, and uses the following variable:



| Name            | description                                                | default value                                     |

|-----------------|------------------------------------------------------------|------------------------------------------|

|-----------------|------------------------------------------------------------|---------------------------------------------------|

| `NG_TEST_ARGS`  | Angular [ng test](https://angular.io/cli/test) arguments   | `test --code-coverage --reporters progress,junit` |

| `NG_BUILD_ARGS` | Angular [ng build](https://angular.io/cli/build) arguments | `build --prod`                           |

| `NG_BUILD_ARGS` | Angular [ng build](https://angular.io/cli/build) arguments | `build`                                           |



The next chapters presents some requirements related to your unit tests (using Karma).
@@ -81,6 +81,8 @@ the Angular template expects the following in your `karma.conf.js`: 
      ],

    },

  ```

:warning: in case of multiple angular projects in the workspace, each project shall produce its coverage report in `reports/ng-coverage-<projectName>.cobertura.xml` (it can be in sub-folders but must follow the file name pattern).



3. Additionally, if using SonarQube, you may also want to generate [LCOV report](https://docs.sonarqube.org/latest/analysis/test-coverage/javascript-typescript-test-coverage/):

  ```js

    coverageReporter: {
@@ -120,6 +122,8 @@ In order to be able to [integrate your test reports to GitLab](https://docs.gitl 
      ...

    }

  ```

:warning: in case of multiple Angular projects in the workspace, each project shall produce its JUnit report either in `reports/ng-test-<projectName>.xunit.xml` or `reports/<projectName>/ng-test.xunit.xml`.





Additionally, if using **SonarQube**, you may also want to generate [SonarQube generic test report](https://docs.sonarqube.org/latest/analysis/generic-test/):
@@ -183,11 +187,11 @@ The Angular template features a `ng-publish` job to publish the built project. 
This job is bound to the `publish` stage, and uses the following variable:



| Name                       | description                                                                 | default value                                                    |

|-----------------|------------------------------------------------------------|------------------------------------------|

|----------------------------|-----------------------------------------------------------------------------|------------------------------------------------------------------|

| `NG_PUBLISH_ENABLED`       | Set variable to `true` to enable the publish job                            | none (disabled)                                                  |

| `NG_PUBLISH_PROJECTS` | Space separated list of projects to publish | If no project is specified, the value of _angular.json_ `defaultProject` property is used |

| `NG_PUBLISH_PROJECTS`      | Space separated list of projects to publish                                 | If no project is specified, all workspace projects are published |

| `NG_PUBLISH_ARGS`          | NPM [publish](https://docs.npmjs.com/cli/v6/commands/npm-publish) arguments | `--verbose`                                                      |

| `NPM_PUBLISH_REGISTRY`     | NPM registry to publish to | uses GitLab project npm packages registry  |

| `NPM_PUBLISH_REGISTRY`     | NPM registry to publish to | uses GitLab project npm packages registry      |                                                                  |

| :lock: `NPM_PUBLISH_TOKEN` | NPM publication registry authentication token                               | none                                                             |



:warning: When using the gitlab registry (which is the default behavior), your NPM package name must be in the format of `@scope/package-name`:

kicker.json

+2 −2
Original line number Diff line number Diff line
@@ -29,7 +29,7 @@ 
    {

      "name": "NG_BUILD_ARGS",

      "description": "Angular [ng build](https://angular.io/cli/build) arguments",

      "default": "build --prod",

      "default": "build",

      "advanced": true

    },

    {
@@ -68,7 +68,7 @@ 
        },

        {

          "name": "NG_PUBLISH_PROJECTS",

          "description": "Space separated list of projects to publish. If no project is specified, the value of _angular.json_ `defaultProject` property is used",

          "description": "Space separated list of projects to publish. If no project is specified, all workspace projects are published.",

          "advanced": true

        },

        {

templates/gitlab-ci-angular.yml

+55 −44
Original line number Diff line number Diff line
@@ -63,7 +63,7 @@ variables: 
    e2e



  # Angular Build

  NG_BUILD_ARGS: "build --prod"

  NG_BUILD_ARGS: "build"



  # default production ref name (pattern)

  PROD_REF: '/^(master|main)$/'
@@ -78,7 +78,7 @@ variables: 


  # List of projects to publish, use space (" ") for separation

  # ex: NG_PUBLISH_PROJECTS: "Project1 Project2 myLib"

  # By default, NG_PUBLISH_PROJECTS is the value of angular.json, "defaultProject" property

  # If no projects specified, all workspace projects are published.



  # Set some args of `npm publish` command

  # ex: NG_PUBLISH_ARGS: "--dry-run"
@@ -264,38 +264,51 @@ stages: 
    log_info "... done"

  }



  function read_default_project() {

  function run_ng_build_for_libraries() {

    # current directory should be ${NG_WORKSPACE_DIR}

    angular_json=./angular.json

    default_project=$(node -pe "require('${angular_json}').defaultProject")

    default_project_type=$(node -pe "require('${angular_json}').projects['${default_project}'].projectType")

    libs=$(node -pe "Object.entries(require('${angular_json}').projects).filter(entry => entry[1].projectType === 'library').map(entry => entry[0]).join(' ')")

    if [ -n "${libs}" ]; then

      for lib in ${libs}; do

        log_debug "building library ${lib}"

        # shellcheck disable=SC2086

        ng $NG_BUILD_ARGS "${lib}"

      done

    fi

  }



  function run_ng_build() {

    read_default_project

    case ${default_project_type} in

        library)

  function run_ng_build_for_applications() {

    # current directory should be ${NG_WORKSPACE_DIR}

    angular_json=./angular.json

    apps=$(node -pe "Object.entries(require('${angular_json}').projects).filter(entry => entry[1].projectType === 'application').map(entry => entry[0]).join(' ')")

    if [ -n "${apps}" ]; then

      for app in ${apps}; do

        log_debug "building application ${app}"

        # shellcheck disable=SC2086

          ng $NG_BUILD_ARGS

          ;;

        *)

        ng ${NG_BUILD_ARGS} --no-progress "${app}"

      done

    fi

  }



  function run_tests() {

    # shellcheck disable=SC2086

          ng $NG_BUILD_ARGS --no-progress

          ;;

    esac

    ng $NG_TEST_ARGS --watch=false --no-progress

  }



  function run_ng_build_libs() {

    # current directory should be ${NG_WORKSPACE_DIR}

    angular_json=./angular.json

    libs=$(node -pe "Object.entries(require('${angular_json}').projects).filter(entry => entry[1].projectType === 'library').map(entry => entry[0]).join(' ')")

    log_debug "parsed libs: ${libs}"

    if [ -n "${libs}" ]; then

      log_info "libs detected: ${libs}"

      for lib in ${libs}; do

        log_debug "building lib ${lib}"

        ng build "${lib}"

  function merge_coverage() {

    reports=$(ls reports/**/ng-coverage*.cobertura.xml)

    reports_count=$(echo "$reports" | wc -l)

    if [[ ${reports_count} -gt 1 ]]; then

      log_info "merging ${reports_count} Cobertura reports into one..."

      final_report="reports/ng-coverage.cobertura.xml"

      reports_opts=""

      for report in ${reports}; do

        # in case of multiple projects, report name should be : 'ng-coverage-<projectName>.cobertura.xml'

        project=$(basename -- "$report" | sed "s:ng-coverage-::g" | sed "s:.cobertura.xml::g")

        reports_opts="${reports_opts} ${project}=${report}"

      done

      # shellcheck disable=SC2086

      npx -y cobertura-merge -p -o "${final_report}" ${reports_opts}

    fi

  }
@@ -329,17 +342,17 @@ stages: 
  }



  function npm_publish() {

    # current directory should be ${NG_WORKSPACE_DIR}

    angular_json=./angular.json

    package_json=./package.json

    

    projects_to_publish=${NG_PUBLISH_PROJECTS}

    if [ -z "${projects_to_publish}" ]; then

      read_default_project

      log_info "No projects specified, falling back to default project: \\e[33;1m${default_project}\\e[0m."

      projects_to_publish=${default_project}

      log_info "No projects specified, publishing all projects"

      projects_to_publish=$(node -pe "Object.keys(require('${angular_json}').projects).join(' ')")

    fi



    log_info "Publishing the following projects: ${projects_to_publish}..."

    # current directory should be ${NG_WORKSPACE_DIR}

    angular_json=./angular.json

    package_json=./package.json

    

    # first we check all specified projects exist

    for project in ${projects_to_publish}; do
@@ -461,26 +474,24 @@ ng-build: 
  extends: .ng-cli-base

  stage: build

  script:

    # build libs so they are available for other projects tests

    - run_ng_build_libs

    # launch unit test and code coverage

    - ng $NG_TEST_ARGS --watch=false --no-progress

    # build production artifact

    - run_ng_build

  coverage: '/^Statements\s*:\s*([^%]+)/'

    - run_ng_build_for_libraries

    - run_ng_build_for_applications

    - run_tests

    - merge_coverage

  coverage: /^\s*Total line Coverage\s*:\s*(\d+(?:\.\d+)?)\%$/

  artifacts:

    reports:

      coverage_report:

        coverage_format: cobertura

        path: "$NG_WORKSPACE_DIR/reports/ng-coverage.cobertura.xml"

      junit:

        - "$NG_WORKSPACE_DIR/reports/ng-test.xunit.xml"

        - "$NG_WORKSPACE_DIR/reports/**/ng-test*.xunit.xml"

    when: always # save artifact even if test failed

    name: "$CI_JOB_NAME artifacts from $CI_PROJECT_NAME on $CI_COMMIT_REF_SLUG"

    paths:

      - $NG_WORKSPACE_DIR/dist

      - $NG_WORKSPACE_DIR/reports/ng-test-*"

      - $NG_WORKSPACE_DIR/reports/ng-coverage-*"

      - $NG_WORKSPACE_DIR/reports/**/ng-test*"

      - $NG_WORKSPACE_DIR/reports/**/ng-coverage*"

    expire_in: 1 day



###############################################################################################