角度新手问题

Question

亲爱的 Angular 社区，

我最近开始为我的学校设计一个 Angular 项目。我以前从未使用过角度，需要一些帮助。也许你们可以给我一点启动。

首先我创建了一个新的项目，安装了 bootstrap、chartjs 和材料设计并输入了 ng serve 我收到的第一条消息是

浏览器列表：caniuse-lite 已过时。请运行下一条命令npm update

我尝试更新但它不起作用。为什么已经有过时的东西了？

这是我的 package.json：

{
  "name": "tqr-analytics",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.5",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.9.3",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "ng2-charts": "^2.3.0",
    "ngx-bootstrap": "^5.2.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.21",
    "@angular/cli": "~8.3.21",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~13.1.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.0.3",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.5.4",
    "tslint": "~5.20.1",
    "typescript": "~3.5.0"
  }
}

然后试图弄清楚如何使用 karma 实现一些测试，并且它们在我的工作站上本地运行良好。当然，我需要使用 gitlab 和 heroku 为 ci/cd 创建一个管道，因为我听说过它并想尝试一下。但在 gitlab 上测试失败。

我在本地遇到了同样的错误，可以通过 npm install 安装 angular dev 包来修复它，但我无法弄清楚如何在 gitlab 上做到这一点。

整个设置的目标是有一个良好的基础，这样我就可以开发一个带有角度的仪表板并展示 ci/cd 的原理。

我的 gitlab-ci.yml 看起来像这样：

我也不确定我设置这个 gitlab-ci-yml 的方式是否正确，如果您有任何建议，请告诉我。

感谢您阅读本文。

Answer 1

可以解决问题。我更新了我的 gitlab-ci.yml 并将 npm ci 添加到 srcipt 部分。

test:
  stage: test
  image: trion/ng-cli-karma:${CLI_VERSION}
  allow_failure: false
  script:
    - npm ci
    - ng test --progress false --watch false
  artifacts:
    expire_in: 1 day
    paths:
      - dist/
  tags:
  - docker

不太确定这是否是正确的方法，但它有效。