Setup angular cli production build tfs

Question

Locally my project builds fine with ng build --prod but if I set it up on tfs (team foundation server) with the following powershell script it fails with some errors.

ps script:

npm install
npm run ng build --prod

tfs build output:

[1m[33mWARNING in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/scss/style.scss
autoprefixer: D:\a\1\s\src\scss\style.scss:7468:3: Replace transition-property to transition, because Autoprefixer could not support any cases of transition-property and other transition-* @ ./src/scss/style.scss 4:14-203 2017-04-30T07:17:51.9419669Z @ multi ./~/primeng/resources/themes/bootstrap/theme.css ./~/primeng/resources/primeng.min.css ./~/font-awesome/css/font-awesome.css ./src/scss/style.scss[39m[22m
[error] 0% compiling 10% building modules 0/1 modules 1 active multi D:\a\1\s\src\main.ts
[error]Process completed with exit code 0 and had 3 error(s) written to the error stream.

Try to remove local node_modules folder and run npm I and build again. Will you see the same error? — yurzui, Apr 30 '17 at 09:24
Locally it builds fine but It does not build on team foundation server. — Rick, Apr 30 '17 at 17:20
I see but maybe your packages versions are different with tfs. I had the same issue. It worked on locale machine because i used old version and didn't update local node_modules — yurzui, Apr 30 '17 at 17:28
@yurzui I tried and it builds fine but not on tfs. Which build host do you use and is your script the same as mine? — Rick, May 01 '17 at 18:44
I know that it could be run on your local server, could you please test it run this file or command manually on your build agent server. Your project is mapping down to the path `D:\a\1\s\`. — Tingting0929, May 02 '17 at 05:53
@Tingting0929-MSFT I'm sorry but how can I run it on my build agent? I'm using the hosted one on tfs. — Rick, May 02 '17 at 19:03

Rick · Accepted Answer · 2018-03-20T08:48:18.657

11

It works now, I removed the powershell script and added seperate tasks in the build process.

npm install (standard one)
npm install -g @angular/cli (command line)
ng build --prod (command line)

Update based on comment:

You can also use: npm run ng build -- --prod. This way you don't have to install angular/cli.

edited Mar 20 '18 at 08:48

answered May 03 '17 at 06:55

Rick

1,224
3
13
27

are you using 3 powershell scripts? (1 ps script 1 line) ? – nerlijma Jul 10 '17 at 20:59
@nerlijma I'm not using ps script at the moment. Just cmd commands – Rick Jul 12 '17 at 04:18
does this install the cli every time a build runs? – jparram Jul 13 '17 at 16:21
Yes. Its not the best thing but it works for the moment. – Rick Jul 14 '17 at 17:20
I tried the same thing, but I keep getting the error: 'ng' is not recognized as an internal or external command, operable program or batch file. – Siddhant Aug 31 '17 at 07:48
@Siddhant: you may have to set PATH variable in environment variables for ng commands. – Sreekumar P Oct 23 '17 at 10:48
Actually, the CLI was not getting installed properly, so instead, made a one time installation of the CLI on my TFS server. Will upgrade it as and when required. Thanks all the same [Sreekumar](https://stackoverflow.com/users/451221/sreekumar)..! – Siddhant Nov 22 '17 at 09:44
Would it not be possible to run the ng command from the node_modules/.bin directory? – Martin Randall Mar 15 '18 at 10:43
Thanks for the `npm run ng build --`! This saves a lot of PATH specific problems. – kapsiR Feb 25 '19 at 17:13

score 2 · Answer 2 · answered Apr 06 '18 at 09:53

I was doing the same as the marked answer, but it bugged me that it's always installing angular-cli globally everytime. So i just switched that a bit like this:

node $(Build.SourcesDirectory)/node_modules/@angular/cli/bin/ng build --prod -op $(Build.BinariesDirectory) -v

now, after npm installs all the deps, it's gonna install cli too, and then just use that one.

score 2 · Answer 3 · answered Aug 07 '19 at 09:50

2

Add npm Task (Add Task >> Package >> npm) with below configuration

answered Aug 07 '19 at 09:50

ElasticCode

7,311
2
34
45

2

this worked for me in a way. I was getting a different error but I just tried using version 0.* in tfs build and it worked – Paras Sachapara Dec 06 '19 at 20:23

Setup angular cli production build tfs

3 Answers3

Linked