Jenkins Integration

[skofgar]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] question

Versions.

@angular/cli: 1.0.4
node: 7.9.0
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.5
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.4
@angular/compiler-cli: 4.1.3

Repro steps.

Created a project with angular CLI. Created a project on Jenkins using following shell execution steps:

npm install --silent
./ng test --code-coverage --single-run 
# I created a symlink for ng to the version installed by npm, see below

The log given by the failure.

n/a

Desired functionality.

I would like to integrate a project using Angular CLI onto our Jenkins server.

Mention any other details that might be useful.

I don't have a lot of Jenkins configuration experience, but from how it looks like it is not that simple out of the box. We are running compass on our Jenkins server, we have NPM version 4.6.1 on our Jenkins server. However, it looks like I need to adjust the configuration quite a bit more. Like changing Chrome to PhantomJS, convert the istanbul reports to cobertura reports etc.
I even created a symlink for angular cli in the project, so we don't have to install it globally on the server using: ln -s node_modules/@angular/cli/bin/ng ng.

I feel like I am missing something obvious and all these steps shouldn't be necessary. Unfortunately I am not finding any documentation about CI integration here or somewhere else (google...).

Could you give me some pointers/hints please?

[skofgar]

E.g. Is there a karma.conf template for jenkins?

[skofgar]

Thinking about it, my question is probably not that clear and might be more Angular 4 related than Angular CLI...
It seems like PhantomJS is currently not supporting ES6, but maybe I misread that. I will look into this more tomorrow.

[PikaChokeMe]

I have a Jenkins CI job setup that runs and builds angular...

As a part of the Jenkins job we do not install the CLI globally on our build machines at all, but instead call
npm install on each git pull down that kicks off the job. This will install whatever version of the CLI that the package.json specifies for that particular revision.

We also do testing with ng test --single-run --code-coverage (which typically works fine) and we've never had any issues testing on chrome.

I hope that this is helpful but if you need anything more specific I'd be happy to help you out.

[skofgar]

@BustyLoli-Chan thanks a lot for your answer. That's very helpful. For some reason I thought I'd need a headless browser, but I am having issues getting it working with PhantomJS.
Also, I was hoping I could put the browser onto the package.json – as a dependency – , however as far as I know this is only possible with PhantomJS.
But I will give it a try with Chrome and report back.

One question: Did you also use a symlink or ./node_modules/@angular/cli/bin/ng – since you didn't install Angular CLI globally?

[PikaChokeMe]

Package.json
"karma-chrome-launcher": "~2.1.1",

It wasn't necessary to make a symlink since running an npm install just downloads and puts the "binaries" in the local directory.

[skofgar]

@BustyLoli-Chan Thanks!

Hmm.. that's odd.. in our installation it wasn't able to find/use 'ng' in the project folder, even after running npm install. I will investigate that. Thanks for pointing that out.

[PikaChokeMe]

we are windows machines. I don't know if ./ng would fair better for you since most linux machines don't have their current directory added to their path.

Most of our ng jobs are simply executed as bat 'npm run something'
and in our package.json we would define

"scripts": {
    "something": "ng do something or other",
  },

I realize this actually different from what I first told you because technically it's running npm which is installed globally and npm is doing the intermittent lookup work to find the CLI and run its stuff

[skofgar]

@BustyLoli-Chan Oh okay! That makes sense though. Thanks for the explanation!
I think I figured it out. I will close this issue now and add another comment explaining what I did as soon as I verified that everything works the way I want it.

[skofgar]

Thanks again for your help. So there were several things that confused me:

• I didn't know how easy it was to have istanbul to create a cobertura report (alternatively we could have installed a different plugin for istanbul)
• I didn't know PhantomJS is not supporting ES6
• I didn't realize that I need to "turn on" polyfills

What I ended up doing was:

• turn on all polyfills that applied (we activated all of them in the src/polyfills.js-file)
• added intl, phantomjs-prebuilt, karma-phantomjs-launcher and karma-junit-reporter to package.json

This is how our karma.conf.js ended up looking like:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-phantomjs-launcher'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-junit-reporter')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    junitReporter: {
            outputDir: "test-results",
            outputFile: "unit-test-results.xml"
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly', 'cobertura', 'text-summary' ],
      'report-config': {
        cobertura: {
          file: 'cobertura.xml'
        }
      },
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'junit', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false
  });
};

Thanks again for all your help 👍

[cbeldacap]

Hi all, I just set everything up to use PhantomJS in my Angular4 project. I've uncommented all the polyfills, added intl as a dependency, configured my karma.conf.json as @skofgar commented before and targeted to es5 on tsconfig.spec.json. I'm having this problem on and on though:

Does anyone know how would be happening?
Thanks a lot in advance,

Cristóbal