Angular CLI VSO Continuous Integration

Question

I have set up CI for Angular2 projects in the past which use npm commands, however I recently started using Angular-CLI which uses 'ng' commands instead.

When I try to set up CI for my project in Visual Studio Online I can't find a way to execute 'ng' commands.

I have tried running NPM command (using npm task from the catalog) to install the CLI; npm install -g angular-cli, after that I run npm install. Now to run 'ng build' I have tried to run in using command line tool (since there doesn't appear to be a tool to allow me to run ng commands), however that fails saying that ng is not a recognised command.

Any suggestions on setting up CI for an Angular-CLI project using VSO?

Thanks

Answer 1

If you want your build definition to run on any build agent (the Hosted one and any on premise agent), you could relying on local installation of angular-cli with npm, without the -g flag:

>npm install angular-cli

By default npm will install 'ng' under .\node_modules\.bin\

Your build definition could use the 'npm install' task to install locally 'ng', then you can invoke it by 'Command Line' task because you know the path to it (e.g. $(Build.SourcesDirectory)\node_modules\.bin).

Example of a build definition creating a new project and building it using 'ng':

• install locally the 'ng' cli tool:

• create the project 'helloworldproject':

• build the project 'helloworldproject':

==Update (programmatically retrieve the actual binary path with 'npm bin')==

To remove the assumption where the binaries are placed and have a more resilient build definition, you could retrieve programmatically the actual binary path used by npm using the command:

>npm bin

The following example (this time a short PowerShell script) shows how to create the 'helloworldproject' and build it thereafter:

Remember:

• to disable the option 'Fail on Standard Error' on the PowerShell task, as the ng tools likes to write stuff there even when it succeeds.
• of course you still need the 'npm install' task as shown above before using the 'ng' tool.