Angular CLI

There are many ways to start out with a new Angular project. The most convenient one is probably to use the Angular CLI. The CLI, as the name already suggests, is a command-line interface to create new projects as well as new artefacts within an existing project.

The following instructions are guiding you through the creation of your first Angular project using the Angular CLI tool.

1. Let's start by installing the Angular CLI on your system. Execute the following command on your command line:

npm install -g @angular/cli@6.0.8

2. After you've installed the Angular CLI tool, you can now use it to scaffold a new Angular project. You can access the tool executable by typing ng in your terminal. Let's open another Terminal window and create a new Angular project using the Angular CLI tool:

ng new my-first-app --prefix mac

3. The previous step will take a while since all dependencies of your project need to be installed first. After completion, we can now use the CLI tool to start a local development server:

cd my-first-app
ng serve

4. You can now launch your favourite browser and open up the address http://localhost:4200, where you should see the message welcome to mac.

Congratulations! You've just created your first Angular application using the Angular CLI tool! As I already told you, the convenience level of starting an Angular project like this is really great.

The CLI tool can be viewed as a scaffolding tool which helps you set up the necessary tooling as well as the structure of your project. Let's take a look at the most important features you'll get for free when you're using the CLI to give birth to your project:

• TypeScript: Maybe obvious, but in order to use a transpiler, there will be many manual steps involved for you to set up the necessary tooling.
• Webpack: This massive power tool is solving a lot of problems you probably haven't even though about yet. Along with TypeScript transpilation, its main concern is to load ECMAScript modules and provides you with a development server to preview and work on your project. Finally, it's also the tool which helps you to create an optimized bundled version of your project for production use.
• Karma, Jasmine, and Protractor: This trio is unbeatable when it comes to testing! While Karma runs your executable specifications, Jasmin helps you write your tests. Protractor, on the other hand, can be used to create full end-to-end, integrational tests.

Please go ahead and explore the source code that has been generated using the Angular CLI. Over the course of the chapters in this book, we will gain more in-depth knowledge, which will help you understand and put all of those pieces together. For the moment, we were just concerned about the installation of the Angular CLI and gave it a quick dry run.