Integrate an Angular project in Teamcity

Teamcity from Jetbrains provides a first-class Continous Integration experience.

Angular is a popular framework for building SPA frontends.

This guide assumes you are using Jest as test-runner and eslint as linter.

1 - In your Angular project add the following two libraries:

npm install --save-dev jest-teamcity eslint-formatter-teamcity

2 - In the file package.json localize the scripts section and then:

If you are using a monorepo with nx add:

"scripts": {
"lint": "nx run-many target=lint",
"lint-ci": "nx run-many target=lint --format ./node_modules/eslint-formatter-teamcity/index.js --skip-nx-cache",
"test": "nx run-many test",
"test-ci": "nx run-many test --reporters=jest-teamcity --code-coverage --skip-nx-cache"
}

If you are not using nx, but ng directly, add:

"scripts": {
"lint": "ng lint",
"lint-ci": "ng lint --format ./node_modules/eslint-formatter-teamcity/index.js",
"test": "ng test",
"test-ci": "ng test --reporters=jest-teamcity --code-coverage --watch=false"
}

To know more visit:

• jest-teamcity plugin at npmjs
• eslint-formatter-teamcity plugin at npmjs
• Angular documentation
• Teamcity product page