The Angular CLI

One of the tools that I use frequently when building Angular v2+ applications is the amazing Angular CLI toolkit. The Angular CLI is a command line tool that allows for quickly bootstraping Angular applications that serve locally right out of the box. The created application is built to serve on Webpack and requires Node v4+ and NPM v3+. Installing the Angular CLI with NPM is very easy using the below command.

npm install -g angular-cli

Now that we have the CLI installed on our local machine, we can create a new app using the ng command.

ng new MY_AWESOME_APPLICATION
cd MY_AWESOME_APPLICATION
ng serve

We now have a working application that can be accessed at http://localhost:4200/. You can adjust the HTTP port, live reload port and host address with the command line options below, which would change your URL to http://0.0.0.0:4201/.

ng serve --port 4201 --live-reload-port 49153 --host 0.0.0.0

This basic app comes with a single component (AppComponent) that can be found at /src/app/app.component.ts. Let's go ahead and add another component to the mix using the ng generate command.

ng generate component new-awesome-component

Anytime that we create a new component using the Angular CLI we end up with four (4) new files. We now have the below files under the /src/app/new-awesome-component/ directory.

 - new-awesome-component.component.css
 - new-awesome-component.component.html
 - new-awesome-component.component.spec.ts
 - new-awesome-component.component.ts

The spec file listed above is where we can add tests, it comes with a simple test that makes sure that the component can be created. Let's go ahead and run our tests using the below command.

ng test

Now that we've got a working application we will want a way to package our code. We can do so with the ng build command. We'll probably want to do this for Production and maybe we want to use Ahead of Time compilation. Read more about AoT here.

ng build --prod --aot

In summary, I highly recommend getting started with the Angular CLI now. It's an invaluable tool for building Angular applications quickly.

As of this writing, the Angular CLI is still in Beta. Follow along with the development on their GitHub repo.

Add new comment