Monday, February 20, 2017

Angular CLI gotchas on Windows machine.

Blogger: V. Keerti Kotaru . Author of Angular Material book 

I've attempted to install Angular CLI on a Windows 7 machine. Unlike on a Mac machine, it wasn't seamless. Here are the problems I've encountered and the solutions I found after a little bit of Googling! 

If you are new to AngularCLI, it helps setup a new Angular 2 project and scaffold components, providers etc (as we continue to develop on the project). It is a big time saver.

Angular CLI installation

Angular CLI Github page (link) documents installation with the following step. If your machine has the latest versions of Node, NPM and other prerequisites, this is all you need. You can start using AngularCLI.

npm install -g @angular/cli

However, if you are like me, following are some of the issues and solutions. This is a quick troubleshooting guide. The resolutions were applied on a Windows 7 machine.

Node Version:

Review your node version. Angular CLI and Angular 2 project need node version 6.9.0 or above. Run the following to review if you need to upgrade Node.

npm --version

To upgrade, open a command prompt as an administrator and run the following command

npm install -g n

Missing Python & node-gyp

To install Angular CLI, we need Python and node-gyp. If you encounter a problem running build step during the install, try the following.

Open command prompt as an administrator

npm install -g --production windows-build-tools

Once Windows Build Tools are installed, npm install Angular CLI again,

npm install -g @angular/cli

Verify installation

ng --version

If all is well, you should see version number. See figure 1.

Figure 1: Angular-CLI installed successfully


What are Windows Build Tools?

Windows Build Tools provides a tool-set for compiling native node modules. It includes node-gyp which is a cross-platform compiler for node modules. The Windows Build Tools also include Python. It installs Python and makes it available globally on the Windows machine.

References

Stackoverflow thread - http://stackoverflow.com/questions/3701646/how-to-add-to-the-pythonpath-in-windows-7

Windows Build Tools, NPM package - https://www.npmjs.com/package/windows-build-tools

Angular CLI GitHub page- https://github.com/angular/angular-cli#installation