What is Angular CLI and how to do I use it?

Some Background

Angular has become a very popular web development language over the past few years and continues to remain one of industry leaders.  Julia Silge, a data scientist at Stack Overflow, say Angular is the most searched topic in all web languages (shown in her own blog post) and reinforces that fact that Angular is here to stay.
Angular has had some confusing name changes in the past couple years going from AngularJS, Angular2, Angular4, and now Angular5 as recently as November 1^st.  This post is going to be written for Angular4 and from here on out referred to as Angular.  This post also assumes you have some limited knowledge around how Angular projects are structured and have an interest in using Webpack, the backbone of most Angular projects and to Angular CLI itself.

Webpack

Webpack handles the importing of 3^rd party libraries. For instance, if you are using NPM to install libraries to your project, Webpack will handle the import process to your Angular project and turn them into modules for the developer automatically.  Webpack also supports BrowserLink, which recognizes file changes when you change your Angular code, and automatically refreshes the browser that is listening to the app. Additionally, Webpack will handle a process called, “Code Spitting,” which bundles files together for Lazy Loading and better data caching while the project is running.  Finally, it also minifies your JavaScript files, which speeds up your program and readies your code for a production environment.  Essentially, Webpack works like task runner on windows, and provides developers with a large amount of functionality pre-built in a fresh project.

Angular CLI

Angular CLI is a command line interface, thus ‘CLI’, which includes the functionality that Webpack provides.  It uses Webpack to include all the packaging, importing, BrowserLink etc., but you do not need to know how Webpack works or how it needs to be configured to run in different environments or on different types of machines.  All the Webpack configuration is done completely by CLI and leaves it out of the hands of a developer, unless they choose to adjust the settings themselves.
In addition, CLI assists developers by generating code which follows the best practices as defined by https://Angular.io, Angular’s home site.  As shown in the next section, creating your Angular project via the command line is done within minutes and you will already have a working app to begin development on.

Using and Installing Angular CLI

CLI has made the process very simple and quick to generate a new project to quickly begin development:
First, if you have never installed CLI before all you need to do is open your command line tool and type ‘npm install -g @angular/cli’ which will install CLI globally on your machine.

Then you can run ‘ng new AngularTestApp’ which creates a new project called “AngularTestApp”

And you will see this appear in the directory you ran ‘ng new’ in:

• Run ‘cd AngularTestApp’ to step into the newly created project

• Run ‘ng serve’ which will run your project locally and you can direct a browser to.

You can see within the ‘ng serve’ result that the “Live Development Server is listening on ocalhost:4200” Direct a browser to that address to see your executed app:

And opened in Visual Studio Code, your project will look like this:

In Conclusion

And that is all it takes to get started using Angular with CLI and Webpack.  Using CLI and Webpack allows for new and experienced users of Angular to easily get started with very few hiccups.  With only 4 commands in the command line, you have a functioning app that is set up with Web Link, the most common 3^rd party libraries, and a very basic, but executable Angular Project.  Developers can very easily begin to add your own modules and components to this base app that CLI provides.  You can use very lightweight code editors, like Visual Studio Code, because CLI will manage a majority of the functionality that a larger tool, like Visual Studio 2017, would normally handle.  Additional commands for CLI can be found on Angular’s GitHub Page: https://github.com/angular/angular-cli/wiki  CLI’s functionality allows you to create services, Modules, Components, and more all from the command line, which greatly speeds up development time.