Setup angular cli production build tfs

问题:

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.

回答1:

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.

回答2:

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.

回答3:

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