Angular CLI Install | Getting Started

In this tutorial, we'll be showing you how to get started with Angular using the Angular CLI. Unlike our Angular Webpack tutorial, this example will quickly demonstrate how to setup an Angular project without all the manual configuration. With just a few CLI commands, you'll create a basic app with the required libraries and modules already included.

Installing the Angular CLI

Assuming you have Node.js 6.9.0 or greater installed, you can use npm to easily install the Angular CLI. To install the CLI globally, simply run:

npm install -g @angular/cli

This will install the Angular CLI globally on your machine. To ensure everything installs properly, try running:

ng version

If the Angular CLI is installed correctly, you should see the version number printed in the console.

Creating a new Angular app

Now that you've got the Angular CLI installed, it's time to witness just how fast and easy creating new apps can be using the CLI. In your terminal, run the following:

ng new angularCli

The ng new <name> command will create a new directory with the specified name and initialize a new Angular app within that directory. Similarly, you can run ng init to create a new Angular app from the currenty directory.

Running the app

Navigate to the root of your newly created angularCli directory and run:

ng serve

This will launch a Webpack dev server on localhost:4200. If you visit the local address in your browser, you should see the default HTML for Angular.

The default local server also comes with LiveReload support. Any changes you make to the source code will automatically trigger Webpack and the server to refresh, making for much faster development.

That was easy!

In just a few quick commands, you've locally set up and run an Angular web app. If you started with our Angular Webpack tutorial, you will notice a similar environment has been created in a fraction of the time. By simply running ng-new, you automatically generate almost everything that was manually configured in the previous example, including:

package.json

The package.json file is automatically configured and included in the project. Additionally, when you run ng-new you automatically install all the npm modules and dependencies defined in the package.json file.

tsconfig.app.json

This is the configuration file for your TypeScript instance. While TypeScript is not technically required to use Angular, it is highly recommended and included as default when using the Angular CLI.

main.ts

The main.ts file is automatically configured for bootstrapping your Angular app. Specifically, it automatically includes and references the root app.module as well as bootstraps the root module to run in the browser via platformBrowserDynamic.

app.module.ts

The app.module.ts file configures the root module for your app and includes the app.component component.

app.component.ts

This is an automatically generated Angular component. Notice how it references an automatically generated app.component.html template and app.component.css as well.

index.html

This is the main entry point for your Angular app. Notice how we include the <app-root> selector which we reference in our main app.component.ts file.

You will also notice that your app is automatically configured to work with the karma and protractor testing frameworks. Additionally, a app.componenet.spec.ts file is automatically generated for testing.

If you want to check out more examples of getting started with the Angular CLI, check out our guide Deploying Apps with the Angular CLI.

Conclusion

If you started with our Angular Webpack tutorial, then you can really appreciate how much faster the Angular CLI makes getting started with Angular. Not only does it automatically configure your project with all the necessary modules and libraries, it also creates a local environment which is optimal for development. Now that you fully understand how to set up an Angular project, it's time to start exploring things like components and services in more detail.

Your thoughts?