Angular-cli build (ng build) on Teamcity

Question

I hope someone has already done this. I am trying to create a continuous build in a team for one of my angular 2 projects. After several studies, I followed these steps:

• Build step1: install jonnyzzz.node plugin for teamcity. (Now I can select Node.js NPM from Runner type)
  Npm Commands: I added the install command
• Build Step 2: Other Node.js NPM and npm Commands: install -g angular -cli
  So far so good
• Now I wanted to build ng build as the third step, and I was really stuck as I have no way to do this.

Any help would be appreciated.

Thanks.

Answer 1

To build ng from the nodejs module for Team city, I modified the package.json file. At the beginning, replace the "ng build" value. And from the team city, the npm build command will call the ng build command.

Answer 2

Instead of changing your package.json, you can use the NPM node.js plugin and the run command:

run build 

build is not the default command for NPM, so you need the 'run build' command, which is mapped to ng build in the default ng-cli package .json

 "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, 

View image

Answer 3

First, start with build agents, where you can edit the buildAgent.properties file and define 3 environment variables. You should have surrounding single quotes here or later in your assembly definitions:

 env.exec.node='C\:\\Program Files\\nodejs\\node.exe' env.exec.npm='C\:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js' env.exec.ng='%env.APPDATA%\\npm\\node_modules\\@angular\\cli\\bin\\ng' 

%env.APPDATA% used %env.APPDATA% , but some settings can be set in Program Files, in most cases it is AppData.

Next, you can define the build steps for your project. Create these new build steps of type Powershell and set Script as the source code. Inside the Script Source, you can now enter:

Set Angle CLI

 & %env.exec.node% %env.exec.npm% install -g @angular/cli 

Set node_modules folder

 & %env.exec.node% %env.exec.npm% install 

Build and publish solution

 & %env.exec.node% %env.exec.ng% build --environment '%env.build.environment%' --scripts-prepend-node-path 

After this step, production assemblies will create your dist folder, which you can include in the artifact paths so that you can access it if you want to create separate assembly configurations of deployment type.

Some considerations to consider here:

• You can define variables inside yours, however different agents can be used in assembly agents, which will slow down your assemblies
• Make sure you have the proper cleanup rules as the node_modules folders can become very large

Hope this helps someone!