如何在Angular 2+项目中调用circleCI环境变量? [英] How to call circleCI environment variable in an Angular 2+ project?

问题描述

我有一个有角度的项目，其中包含一个如下所示的api-keys.ts文件:

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

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

我认为 $fireBaseApiKey作为环境变量存储在我的circleCI项目中，如您在此处的图片所示:

I think the $fireBaseApiKey is stored as an environment variable in my project on circleCI, as you can see in the picture here:

但是，当我在circleCI上运行配置时，仍然出现以下错误:

However, I still get the following error when I run my configuration on circleCI:

src/app/api-keys.ts(1,44)中的

ERROR:错误TS2304:找不到名称 '$ fireBaseApiKey'. src/app/app.module.ts(75,11):错误TS2304:无法 找到名称"apiKey".

ERROR in src/app/api-keys.ts(1,44): error TS2304: Cannot find name '$fireBaseApiKey'. src/app/app.module.ts(75,11): error TS2304: Cannot find name 'apiKey'.

(app.module.ts中的错误直接来自api-keys.ts中的错误)

(The error in app.module.ts comes directly from the error in api-keys.ts)

我试图弄清楚问题是出在circleCI方面还是我将其插入Angular的方式，所以我尝试在配置文件中echo排除环境变量:

I tried to figure out whether the problem was on the circleCI side or with how I was plugging it into Angular, so I tried to echo out the environmental variable in my configuration file:

version: 2.1
orbs:
  cypress: cypress-io/cypress@1.0.1
steps:
  - run:
      name: Setup Environment Variables
      command: |
        echo '$fireBaseApiKey'
workflows:
  build:
    jobs:
      - cypress/install:
          build: 'npm run build'
          context: fireBaseApiKey
      - cypress/run:
          requires:
            - cypress/install
          start: 'npm start'
          context: fireBaseApiKey

出错后我进入了会话，但看不到任何指示 我的echo命令甚至被确认.

I ssh'ed into the session after it errored out, and I couldn't see any indication that my echo command was even acknowledged.

我希望在echo方面或Angular方面的帮助对解决问题有帮助.

I am hopeful that help on the echo front or on the Angular front will be productive to address the question/problem.

此外，我正在使用cypress进行集成测试，因此正在使用Cypress的orb设置和运行测试.我不确定如何/是否环境变量渗透到orb作业中，所以我也将变量添加到项目的上下文中(上下文和唯一键值对的键名相同):

Furthermore, I am using cypress for integration testing and thus am using Cypress's orb for setting up and running the tests. I wasn't sure how to/whether environment variables to infiltrate orb jobs, so I also added the variable to a context for the project (with both the context and the key of the lone key-value pair having the same name):

更新:这是circleCI日志文件的输出:

Update: here is the output from the circleCI log file:

0信息，如果以ok 1冗长的cli结尾，就可以了[ '/usr/local/bin/node'，'/usr/local/bin/npm'，'run'，'build'] 2信息 使用npm@6.4.1 3信息使用node@v10.13.0 4详细运行脚本[ 'prebuild'，'build'，'postbuild'] 5信息生命周期 data-jitsu@0.0.0~prebuild:data-jitsu@0.0.0 6信息生命周期 data-jitsu@0.0.0~build:data-jitsu@0.0.0 7详细的生命周期 data-jitsu@0.0.0~build:生命周期中的unsafe-perm true 8冗长 生命周期data-jitsu@0.0.0~build:PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/root/project/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin 9详细的生命周期数据-jitsu@0.0.0~build:CWD:/root/project 10 愚蠢的生命周期data-jitsu@0.0.0~build:Args:['-c'，'ng build'] 11 愚蠢的生命周期data-jitsu@0.0.0~build:返回:代码:1信号: null 12信息生命周期data-jitsu@0.0.0~build:执行失败 脚本13详细堆栈错误:data-jitsu@0.0.0构建:ng build 13 详细堆栈退出状态1 13的详细堆栈在 EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16) 13 EventEmitter.emit的详细堆栈(events.js:182:13)13 ChildProcess的详细堆栈. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 ChildProcess.emit的详细堆栈(events.js:182:13)13 可能关闭时的详细堆栈(internal/child_process.js:962:16)13 Process.ChildProcess._handle.onexit上的详细堆栈 (internal/child_process.js:251:5)14详细的pkgid data-jitsu@0.0.0 15 详细的cwd/root/project 16详细的Linux 4.4.0-141-generic 17 详细的argv"/usr/local/bin/node""/usr/local/bin/npm"运行""build" 18详细节点v10.13.0 19详细npm v6.4.1 20错误代码 ELIFECYCLE 21错误errno 1 22错误data-jitsu@0.0.0内部版本:ng build 22错误退出状态1 23错误data-jitsu@0.0.0失败 构建脚本. 23错误这可能不是npm的问题.那里 可能是上面的其他日志记录输出. 24详细出口[1，true]

0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ] 2 info using npm@6.4.1 3 info using node@v10.13.0 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle data-jitsu@0.0.0~prebuild: data-jitsu@0.0.0 6 info lifecycle data-jitsu@0.0.0~build: data-jitsu@0.0.0 7 verbose lifecycle data-jitsu@0.0.0~build: unsafe-perm in lifecycle true 8 verbose lifecycle data-jitsu@0.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/root/project/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin 9 verbose lifecycle data-jitsu@0.0.0~build: CWD: /root/project 10 silly lifecycle data-jitsu@0.0.0~build: Args: [ '-c', 'ng build' ] 11 silly lifecycle data-jitsu@0.0.0~build: Returned: code: 1 signal: null 12 info lifecycle data-jitsu@0.0.0~build: Failed to exec build script 13 verbose stack Error: data-jitsu@0.0.0 build: ng build 13 verbose stack Exit status 1 13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16) 13 verbose stack at EventEmitter.emit (events.js:182:13) 13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:182:13) 13 verbose stack at maybeClose (internal/child_process.js:962:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5) 14 verbose pkgid data-jitsu@0.0.0 15 verbose cwd /root/project 16 verbose Linux 4.4.0-141-generic 17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build" 18 verbose node v10.13.0 19 verbose npm v6.4.1 20 error code ELIFECYCLE 21 error errno 1 22 error data-jitsu@0.0.0 build: ng build 22 error Exit status 1 23 error Failed at the data-jitsu@0.0.0 build script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]

推荐答案

好吧，我终于弄明白了，尽管可能是一种怪异的方式.我只是使用sed将环境变量替换为api-keys.ts文件.

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.

因此，这是新的config.yml脚本(请注意进行了广泛的更改，包括wait-on: 'http-get://localhost:4200'(请注意将http-get那里而不是http！).

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'

替换发生在sed -i "s/circleCiApiKey/$fireBaseApiKey/g" src/app/api-keys.ts行上.

api-keys.ts文件又包含:

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: ""
};

这篇关于如何在Angular 2+项目中调用circleCI环境变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！