How to call circleCI environment variable in an Angular 2+ project?

Question

I have an angular project that has an api-keys.ts file that looks like this:

export var masterFirebaseConfig = {apiKey: $fireBaseApiKey, authDomain: \'dataJi         


        

Answer 1

Ok, I finally figured it out, although probably in a hacky way. I just used sed to substitute my environment variable into my api-keys.ts file.

So, here's the new config.yml script (note the extensive changes, including wait-on: 'http-get://localhost:4200' (note the http-get there instead of http!).

version: 2.1
orbs:
  cypress: cypress-io/cypress@1.5.1
jobs:
  build:
    working_directory: ~/project
    docker:
      - image: circleci/node:9.6.1-browsers
    environment:
      circleCiApiKey: fireBaseApiKey
    steps:
      - checkout
      - run:
          name: Show current branch
          command: |
            echo ${CIRCLE_BRANCH}
            ls -larth
            echo $fireBaseApiKey
            cat src/app/api-keys.ts
            sed -i "s/circleCiApiKey/$fireBaseApiKey/g" src/app/api-keys.ts
            cat src/app/api-keys.ts
      - restore_cache:
          keys:
            - v1-dependencies-{{checksum "package.json"}}
            - v1-dependencies-
      - run:
          name: Install local dependencies
          command: |
            npm install
      - save_cache:
          key: v1-dependencies-{{checksum "package.json"}}
          paths:
            - node_modules
      - run:
          name: Building
          command: npm run build
      - save_cache:
          key: v1-dist-{{ .Environment.CIRCLE_BRANCH}}-{{ .Environment.CIRCLE_SHA1}}
          paths:
            - dist
workflows:
  version: 2.1
  build:
    jobs:
      - build
      - cypress/install:
          requires:
            - build
          build: 'npm run build'
      - cypress/run:
          requires:
            - cypress/install
            - build
          start: 'npm start'
          store_artifacts: true
          wait-on: 'http-get://localhost:4200'

The substitution occurs on the sed -i "s/circleCiApiKey/$fireBaseApiKey/g" src/app/api-keys.ts line.

The api-keys.ts file, in turn contains:

export var masterFirebaseConfig = {
    apiKey: "circleCiApiKey",
    authDomain: "dataJitsu.firebaseapp.com",
    databaseURL: "https://datajitsu.firebaseio.com",
    storageBucket: "",
    messagingSenderId: "495992924984"
  };

export var masterStripeConfig = {
  publicApiTestKey: "pk_test_NKyjLSwnMosdX0mIgQaRRHbS",
  secretApiTestKey: "sk_test_6YWZDNhzfMq3UWZwdvcaOwSa",
  publicApiKey: "",
  secretApiKey: ""
};

Answer 2

Have you tried echo $fireBaseApiKey (without quotes)?

To troubleshoot CircleCI, it's useful to launch an image locally.

Example: the command below will launch a local ubuntu instance with an environment variable fireBaseApiKey set to asdf-asdf-asdf. Your local files will be mounted in /usr/src/app.

docker run -it -e fireBaseApiKey=asdf-asdf-asdf -v $PWD:/usr/src/app ubuntu bash

To check your environment variable, try:

echo $fireBaseApiKey

cd /usr/src/app and run your build script, step by step. I find it useful to troubleshoot builds failing for unknown reasons.