Getting Started With Angular 2 & the Angular CLI

In this tutorial, we'll be showing you how to get started with Angular 2 using the Angular CLI. Unlike our Angular 2 Webpack tutorial, this example will quickly demonstrate how to setup an Angular 2 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 2 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 2.

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 2 web app. If you started with our Angular 2 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 2, 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 2 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 2 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 2 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.

Conclusion

If you started with our Angular 2 Webpack tutorial, then you can really appreciate how much faster the Angular CLI makes getting started with Angular 2. 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 2 project, it's time to start exploring things like components and services in more detail.

Join the conversation...

Posted by stackchief
July 21, 2017

as mentioned in the tutorial, you can get a more in-depth tutorial in our original MEAN stack Angular 2 tutorial:

https://www.stackchief.com/tutorials/MEAN%20App%20with%20Angular%202%20and%20Webpack