Setup of a Angular 2 project is a big step. It includes the following steps to name a few:
- Creating the app files
- Configuring TypeScript and Typings
- Adding script tags for
- Angular 2
- Configuring System.js
- Creating our Angular 2 component
- Bootstrapping our Angular 2 application
Good news is that the angular team introduced Angular CLI which makes creating and scaffolding Angular 2 applications incredibly easy.
The Angular CLI does all the heavy lifting for configuration and setup steps shown above and condenses it down into one quick line:
ng new <my-app>
There are a lot of features that Angular CLI provides. This post discusses a few of them.
Installing Angular CLI :
npm install -g angular-cli
Starting a New Application:
Like we saw earlier , starting a new angular 2 application boils down one line:
ng new <my-app>
If you look at the file and folders generated , it would something like below:
It’s important to take note of this directory structure and where the files are located because the application that the Angular CLI generates follows the recommended app structure and style guide.
The majority of our application is under
src/app. This is where we will be working and everything that gets compiled and is available to our final application will be built to the
public folder.The Angular CLI will not only create the files and folders, it will also install
all the npm dependencies required.
Creating a component:
ng generate component my-new-component
Creating a service:
ng generate service my-new-service
Creating a directive:
ng generate directive my-new-directive
Creating a Class:
ng generate class my-new-class
Creating a Interface:
ng generate interface my-new-interface
Creating a Module:
ng generate module my-new-module
Serve Our Application:
This is another cool feature that Angular CLI provides. This allows us to to serve our application in the browser. Previously, we would have to create a server using lite-server or create our own Node (or other) server.
The Angular CLI let’s us do this with one simple command:
Just like that, the Angular CLI will build a server for us with Node and open up our browser.Application is loaded at http://localhost:4200 .
BrowserSync helps reloading the app on saving a file with changes.
Here’s the list of commands that we can also run:
- ng build
- ng test: Run unit tests with karma
- ng e2e: Run end-to-end tests with protractor
- ng get: Gets values for project
- ng set: Sets values for project
- ng github-pages:deploy: Build the app for production, setup GitHub repo, and publish
- ng lint: Run codelyzer to analyze code
- ng format
- ng doc
- ng version: Get the version of the CLI
The Angular CLI is an amazing tool and one that comes at a time when more and more people are getting into Angular 2 development. After all the announcments at ng-conf 2016, now is the time to dive in.
The CLI makes diving in that much more accessible since setup, which took up the majority of the time for first-time developers is now handled for us.