GitLab CI failing with @angular/cli

user_6195300 0
Viewed 8682

I'm trying to deploy a Angular 4 app to Firebase using GitLab CI but it's failing.

Here is my CI configuration:

image: node:latest

cache:
  paths:
    - node_modules/

stages:
  - setup
  - build
  - deploy

setup:
  stage: setup
  script:
    - npm install
  only:
    - master

build:
  stage: build
  script:
    - npm install -g @angular/cli
    - ng build -prod
  only:
    - master

deploy:
  stage: deploy
  script:
    - npm install -g @angular/cli
    - npm install -g firebase-tools
    - ng build -prod
    - firebase use --token $FIREBASE_DEPLOY_KEY production
    - firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_DEPLOY_KEY
  only:
    - master

It's failing at the build stage, i think it's cause the @angular/cli install command.

Also, there is the log of the build stage: http://pasted.co/8d06985e

gitlab-ci
4 Answers

For some reason, globally installed packages are not added to the PATH and not available. What I'm doing is using relative paths (with recent versions of np executables like ng are installed in the node_modules/.bin subfolder)

build:
  stage: build
  script:
    - npm install @angular/cli
    - ./node_modules/.bin/ng build -prod
user_42180170

You should configure the build script in package.json:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
},

Since you are running npm install already in your setup stage, you should not run npm install -g @angular/cli in your build stage. Instead, simply invoke the build script:

build:
  stage: build
  script:
    - npm run build

This way you can avoid creating build on every stage and use your local Angular CLI which you've already downloaded in setup stage.

Alternatively, if you dont want to add a build script in package.json, you can still leverage the local Angular CLI directly in the build stage as follows:

build:
  stage: build
  script:
    - npm run ng -- build --prod

This is admittedly a bit ugly but it does help avoid reinstall of Angular CLI globally.

A less ugly version of above script (using npx, applicable only for node > 5.2) is as follows:

build:
  stage: build
  script:
    - npx ng build --prod
user_50055800

You should not hardcode the path use $(npm bin) instead... it will produce the path to the closes bin folder.

user_23486150
Related