Blank Page Syndrome : Angular with Specific CLI

Philip Brown
2 min readJan 9, 2019

--

“All the horrors in the world can’t compare to the terrors of the blank page.”

So when I start a new project, I always have issues getting started. I know what needs to get accomplished, but configuring and setting up the right tools is always the hardest part.

This addition of the Blank Page Syndrome will get us started with an Angular project by setting up a specific Angular CLI version. This issue arose when dealing with multiple projects with different versions of Angular being used. Usually, we want to install the cli globally, but with multiple products with different versions, this isn’t the ideal situation.

First, we need to make sure that Node and NPM are installed. https://nodejs.org

After installed, I would suggest installing n globally to allow for the management of Node versions.

sudo npm install -g n

Now, if we need to change Node versions in the future, we can do so by using the command: sudo n <version> Example: sudo n 8.9.4

We can now set up a directory to house the version specific CLI. I’ll be using the latest version, but “latest” can be replaced with a specific version.

mkdir ~/ng-latest && cd ~/ng-latest

Alright, let’s now install the version of the CLI that we need. Again, “latest” can also be replaced with a specific version.

npm init

npm install --save-dev @angular/cli@latest

NOTE: I have chosen to scaffold the Angular app within the ~/ng-latest directory. With the following commands, you can generate the app anywhere you wish. If the app is generated within the ~/ng-latest directory, you do not have to use the complete path to ng . You only need to use ng . If the generated app is created outside of the ~/ng-latest directory, the complete path will need to be used. In this application, I will use the complete path to ng just for clarification.

Now we can scaffold the new Angular app with the installed cli version.

~/ng-latest/node_modules/.bin/ng new my-ng-latest-app

If we cd ~/ng-latest/my-ng-latest-app and run ng version , you will see the specified version. Happy Days!!

I hope this helps solve issues as it has for me. This will also allow us to test with specific or the latest version of the cli without having to install the cli globally.

As always, if you don’t mind, give a clap and recommend this article, share on Twitter or Facebook, or leave a comment. I would really appreciate it. Thanks in advance!

--

--

Philip Brown
Philip Brown

Written by Philip Brown

Founder and Developer of @SupplyHog. Studied #ComputerScience at SPSU(@kennesawstate). #500Strong Alumnus

Responses (1)