Angular Start | Table O Contents

How to establish the Angular CLI in Mac Os High Sierra …

• Angular Start | Table O Contents
  • Terminal Preparation
  • Global Ruby Version
    • Global Node Version
    • Global Angular Version
  • App Creation
    • Visual Studio Code
    • Terminal Window
    • Service Open
  • Last Subtitle
  • Support
    • Patreon

Note. The Flammarion Logo Badge in the page header above is an .svg image file set to the dimensions of 5% width, auto height, and zoom. Go ahead and test the zoom-out feature by hovering over the badge to engage the expansion of the image.

Terminal Preparation

Hint. Before we can operate on an Angular program it will be wise to ensure a couple of system variables are set properly.

More to come …

Global Ruby Version

First, from an open global Terminal window pointing to your developer home directory …

• Set the current version of ruby, as follows:

rvm use 2.4.1

Note. If you have not yet established a Ruby Version Manager, please do so now at rvm [3].

Global Node Version

Secondly, from an open global Terminal window pointing to your developer home directory …

• Set the current version of node, as follows:

nvm use 8.9.2

Note. If you have not yet established a Node Version Manager, please do so now at nvm [4].

Global Angular Version

Thirdly, from an open global Terminal window pointing to your developer home directory …

• Uninstall any old version of the Angular CLI that may still be globally resident on your machine, as follows:

npm uninstall -g @angular/cli

• Restart the Terminal

Next, install the current stable version of the Angular CLI using the Node Package Manager, as follows:

npm i -g @angular/cli

Note. As of npm ver 5.0, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed by npm to be valid. Therefore, there is no need to use npm cache clean after performing the uninstall step above.

To check the now current version of Angular CLI installed on your development machine …

• Type the following command statement at the local Terminal prompt $

ng --version

Returns …

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.0
Node: 8.9.2
OS: darwin x64
Angular: 
...

To check the physical disk location of the current version of your Angular CLI …

• From the local Terminal prompt $ of your development machine

• Type the following command statement

which ng

Returns …

/Users/yourHomeDirectory/.nvm/versions/node/v8.9.2/bin/ng

App Creation

To create a new Angular 5 application with routing enabled …

Visual Studio Code

To create a new Angular 5 app from the command line …

• From the local Terminal prompt $ inside the View, Integrated Terminal feature of Visual Studio Code

• Type the ng new command statement with the routing switch -- enabled, as follows:

ng new shell-one --routing

Note. In this case, we have given the new application a name of shell-one.

If you wish to give your new app S-Css capability “right out of the box” …

• Enable the scss switch -- in the above ng new command statement, as well

• Right after the routing switch --, as follows:

ng new shell-one --routing --scss

Terminal Window

Alternatively, you may also initiate the above command statement directly from a local Terminal window, as follows:

• From the Finder in Mac Os High Sierra, right click over the src subdirectory of your My_NG directory

• Select Services, New Terminal at Folder

• Type the ng new command statement with the routing switch -- enabled, as shown above.

Note. Flags have a single hyphen prefix - whereas Switches have a double-hyphen prefix --.

Service Open

To serve your new app through a window of your local default browser, and to listen for changes …

• From either your local Terminal window prompt $, or

• From within the View, Integrated Terminal feature of Visual Studio Code …

• Type the ng serve command statement with the open flag enabled -o, as follows:

ng serve -o

Note. The default port for service and listening to Angular apps on your development machine is port 4200.

Whereas, the default port for service and listening to Jekyll apps on your development machine is port 4000.

Last Subtitle

More to come …

Note. The above synopsis was derived from articles written by Martin Heller [1] and Kim Maida [1].

1. Get Started w Angular by Martin Heller. Published by © 2017 InfoWorld.com.

2. Real-world Angular Series - Part One: MEAN Setup & Angular Architecture by Kim Maida. Published by © 2017 Auth0.com.

3. The Ruby Version Manager. Published by © 2017 Rvm.io.

4. The Node Version Manager. Published by © 2017 Nvm.io.

Support

Please support the co-workers who aggregate the Source Links for our projects.

Patreon

Like what you see in this project? If so, then support the authors and machine-elves who aggregate the source links and pages for our projects via Patreon.