错误和构建失败：使用业力执行测试时

Question

当我在 Angular 项目中运行 mvn install 时，我收到以下错误消息并且在执行单元测试时构建失败：

[INFO] --- frontend-maven-plugin:1.7.6:karma (run tests) @ test-ui ---
[INFO] Running 'karma start karma.conf.ci.js' in /Users/codehan/Documents/projects/test-ui
[ERROR]
[ERROR] /Users/codehan/Documents/projects/test-ui/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts:62
[ERROR] throw new Error(The '@angular-devkit/build-angular/plugins/karma' karma plugin is meant to +
[ERROR] ^
[ERROR] Error: The '@angular-devkit/build-angular/plugins/karma' karma plugin is meant to be used from within Angular CLI and will not work correctly outside of it.

还有下面几行

[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 24.666 s
[INFO] Finished at: 2019-05-21T14:31:09+02:00
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.7.6:karma (run tests) on project test-ui: Failed to run task: 'karma start karma.conf.ci.js' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1) -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

我在 1.7.6 版本中使用frontend-maven-plugin，并将它像这样插入到我的 pom.xml 中。

  <build>
    <plugins>
      <!-- Frontend plugin -->
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.7.6</version>
        <configuration>
          <nodeVersion>v11.10.0</nodeVersion>
        </configuration>
        <executions>
        ...

我的 karma.conf.js 看起来像这样：

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), 
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {environment: 'dev'},
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    phantomjsLauncher: {
      // Have phantomjs exit if a ResourceError is encountered (useful if karma
      // exits without killing phantom)
      exitOnResourceError: true
    },    
    singleRun: false
  });
};

我的 karma.conf.ci.js 是这样的：

var baseConfig = require('./karma.conf.js');

module.exports = function (config) {
  baseConfig(config);
  config.set({
    plugins: [
      require('karma-jasmine'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-chrome-launcher')
    ],
    browsers: ['Chrome'],
    singleRun: true
  });
};

我的 pom.xml 版本 1（失败并出现错误：错误：项目 'karma.conf.js' 不支持 'test' 目标。）

  <execution>
    <id>test</id>
    <goals>
      <goal>npm</goal>
    </goals>
    <configuration>
      <arguments>run test --karma-config karma.conf.js</arguments>
    </configuration>
  </execution>

我的 pom.xml 版本 2（失败并出现错误：错误：'@angular-devkit/build-angular/plugins/karma' karma 插件旨在从 Angular CLI 中使用，并且无法工作正确地在它之外。)

  <execution>
    <id>run tests</id>
    <goals>
      <goal>karma</goal>
    </goals>
    <configuration>
      <karmaConfPath>karma.conf.ci.js</karmaConfPath>
    </configuration>
  </execution>

我的 package.json：

  "scripts": {
    "ng": "ng",
    "start": "ng serve --base-href=/ui/",
    "start-local-prod": "ng serve --base-href=/ui/",
    "start-traci": "ng serve --configuration=traci-dev --base-href=/ui/",
    "build": "ng build --prod --base-href=/ui/",
    "build-traci": "ng build --prod --configuration=traci --base-href=/ui/",
    "test": "ng test",
    "lint": "ng lint",
...

我的 angular.json：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "karmaConfig": "./karma.conf.js",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.spec.json",
    "scripts": [
      "node_modules/jquery/dist/jquery.js",
      "node_modules/moment/moment.js",
      "node_modules/bootstrap-daterangepicker/daterangepicker.js"
    ],
...

我使用以下版本的软件包：

角度：

"@ angular-devkit / build-angular": "^0.12.4",
"@angular/cli": "^7.3.9",
"@Angle/compiler-cli": "7.2.0",
"@angular/core": "7.2.0",
"@angular-devkit/architect": "^0.13.9",
"@angular-devkit/build-optimizer": "^0.13.9",
"@angular-devkit/build-webpack": "^0.13.9",
"@angular-devkit/core": "^7.3.9",

业力

"karma": "^1.7.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-firefox-launcher": "^1.0.1",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.4",
"karma mocha reporter": "^2.2.5",
"karma-webpack": "^3.0.5",

茉莉花

"@ types/jasmine": "2.5.45",
"jasmine-core": "^2.99.1",
"jasmine-spec-reporter": "~4.1.0",

Java

Java version: 1.8.0_201

Maven

Apache Maven 3.6.1

操作系统

MacOS Mojave (Version 10.14.5)

IDE

Visual Studio Code

我做错了什么？

Answer 1

在 pom.xml 中有这一行，这是错误的：

    <goals>
      <goal>karma</goal>
    </goals>

这是错误的原因：Running 'karma start karma.conf.ci.js。这不能以这种方式完成。在 Angular 5 之前可以这样做，但从 Angular 6 开始是不允许的。

第一个版本的pom没问题，但是如果报错，我建议改成这样，从angular.json开始：

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "styles": [
              "src/styles/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          },
          "configurations": {
             "ci": {
                "karmaConfig": "src/karma.conf.ci.js"
             },
             "local":{
                "karmaConfig": "src/karma.conf.js"
             }
          } 

这是ng test 命令将使用的配置。所以我们还要更新 package.json，这行："test": "ng test" 应该改成这样：

   "test:local": "ng test --configuration=local",
   "test:ci": "ng test --configuration=ci"

最后是 pom xml：

  <execution>
    <id>test</id>
    <goals>
      <goal>npm</goal>
    </goals>
    <configuration>
      <arguments>run test:ci</arguments>
    </configuration>
  </execution>