Angular CLI VSO Continuous Integration - 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.

Answer 2

I am currently going through the same thing so feel you pain.
You will probably have to create your own build server either as a VM on azure or on premise. The reason for this is that angular-cli isn't one of the capabilities of the hosted build server at present.
When you do create your own, you are still going to run into some hurdles. When you install angular-cli globally it still puts it under an AppData folder for the user that you install it with. If you have setup your agent to run as a different user for example NetworkService then for that service account "ng" wont be in the path. It will likely also not have permissions to run it because angular-cli has been installed under a user's folder for which it won't have permission.
Ok, so you run the agent with the same user or you resolve the permission and path issue you may still run into problems. If you use a powershell script task as one of your build tasks to perform "ng build" you will then run into the issue that I have highlighted here:
https://github.com/angular/angular-cli/issues/3979
So looks like we may have to resort to a command line build task instead.
Hope this helps. The last two days I have spent on this may as well help someone else.

Answer 3

Regarding Angular2-CLI command line, it uses ng2 instead of ng. (Angular-CLI uses ng), so your command is incorrect.
Refer to these steps to verify ng2 command (works on Hosted agent):
Add NPM build step (npm command: install; arguments: angular2-cli -g)
Add Command Line step (Tool: ng2; Arguments: --version)
If you are using on premise build agent with network service, using these steps instead:
NPM build step (npm command: install; Arguments: angular2-cli -g)
Command Line step (Tool: C:\Windows\ServiceProfiles\NetworkService\AppData\Roaming\npm\ng2.cmd; Argumetns: --version)
For on premise build agent with user account, you can log on that machine and install Angular2-CLI command line (do not need to install it during the build).