GitLab CI 因@angular/cli 而失败

Question

我正在尝试使用 GitLab CI 将 Angular 4 应用程序部署到 Firebase，但它失败了。

这是我的 CI 配置：

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

它在构建阶段失败，我认为这是因为 @angular/cli 安装命令。

此外，还有构建阶段的日志：http://pasted.co/8d06985e

Answer 1

如果你使用 angular 项目，下面的代码在你的脚本中就足够了

script:
- apk add --no-cache git
- npm install
- npm install -g bower
- bower install --allow-root
- npm run-script build

npm install 已经在你的 package.json

中安装了所有库

Answer 2

出于某种原因，全局安装的包未添加到 PATH 中且不可用。我正在做的是使用相对路径（最近版本的 np 可执行文件，如 ng 安装在 node_modules/.bin 子文件夹中）

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

Answer 3

您不应使用 $(npm bin) 对路径进行硬编码...它将生成 closes bin 文件夹的路径。

Answer 4

您应该在 package.json 中配置构建脚本：

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

由于您已经运行宁 npm install 在您的设置阶段，您不应该运行 npm install -g @angular/cli 在您的构建阶段。相反，只需调用构建脚本：

build:
  stage: build
  script:
    - npm run build

这样您就可以避免在每个阶段都创建构建并使用您已经在设置阶段下载的本地 Angular CLI。

或者，如果您不想在 package.json 中添加构建脚本，您仍然可以在构建阶段直接利用本地 Angular CLI，如下所示：

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

这确实有点难看，但它确实有助于避免全局重新安装 Angular CLI。

上面脚本的一个不太丑陋的版本（使用npx，仅适用于节点> 5.2）如下：

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

GitLab CI 因@angular/cli 而失败

GitLab CI failing with @angular/cli

gitlab-ci