4

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

Improve this question

3 Answers 3

Reset to default
12

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:

npm install arguments

  • create the project 'helloworldproject': ng new project

  • build the project 'helloworldproject': ng build project

==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: powershell script to run ng tool

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

Comments

0

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):

  1. Add NPM build step (npm command: install; arguments: angular2-cli -g)
  2. Add Command Line step (Tool: ng2; Arguments: --version)

If you are using on premise build agent with network service, using these steps instead:

  1. NPM build step (npm command: install; Arguments: angular2-cli -g)
  2. 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).

Improve this answer

4 Comments

That was a mistake on my end, I meant angular-cli. I've adjusted the CI to install the correct cli, however it still says that ng is not a recognised command
If you are installing it as part of the build and you are not directly referencing the command as starain-MSFT suggests then it won't be able to find it because the context the command is running in will not have had time to recognise it in the path.
@Pawel Which build agent you used? Hosted build agent or on premise build agent? What's the detail build log?
@starain-MSFT it's alright now, I managed to get it resolved with Luca's answer. Thanks for the support anyway :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.