Use the Angular CLI For Faster Angular 2 Projects

Creating Angular 2 projects has never been faster than with the Angular CLI.

If you’ve ever gone through the Angular 2 Quickstart over the past year, you’ll know that a big part of getting started with Angular 2 is the setup.

It included things like:

  • Creating our app files
  • Configuring TypeScript and Typings
  • Adding script tags for
  • Angular 2
  • Rx.js
  • System.js
  • Configuring System.js
  • Creating our Angular 2 component
  • Bootstrapping our Angular 2 application

Talk about a lot! Thankfully, at ng-conf 2016, the Angular team announced a tool that will make creating and scaffolding Angular 2 applications incredibly easy.

The Angular CLI cli.angular.io

The Angular CLI effectively takes all those configuration and setup steps shown above and condenses it down into one quick line:

ng new scotchy-scotch

There are many things that the CLI can do so let’s get it installed and walk through some features.

Installing the Angular CLI

To install the CLI, we’ll use Node and npm.

npm install -g angular-cli

That’s it! Now we can start using the CLI to build out our applications.

Starting a New Application

To start a new application, just run the command we saw earlier:

ng new scotchy-scotch

So what exactly does this do for us? Let’s take a look at the newly generated folders and files:

// configuration files |- config/ |----- environment.dev.ts |----- environment.js |----- environment.prod.ts |----- karma-test-shim.js |----- karma.conf.js |----- protractor.conf.js // end-to-end-tests |- e2e/ |----- app.e2e.ts |----- app.po.ts |----- tsconfig.json |----- typings.d.ts // npm dependencies |- node_modules/ // public facing app. built things go here |- public/ // where most of the work will be done |- src/ |----- app/ |----- shared/ |----- index.ts |----- environment.ts |----- index.ts // our first generated component |----- scotchy-scotch.component.css|html|spec.ts|ts |----- favicon.ico |----- icon.png |----- index.html |----- main.ts |----- manifest.webapp |----- system-config.ts |----- tsconfig.json |----- typings.d.ts // overall configuration |- typings/ |- .clang-format |- .editorconfig |- .gitignore |- angular-cli-build.js |- angular-cli.json |- package.json |- tslint.json |- typings.json

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.

Learn from this and incorporate these things into your own development. The Angular CLI will not only create the files and folders, it will also install any npm dependencies required.

Here is the default package.json that gets created:

{ "name": "scotchy-scotch", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng server", "postinstall": "typings install", "lint": "tslint \"src/**/*.ts\"", "format": "clang-format -i -style=file --glob=src/**/*.ts", "pree2e": "webdriver-manager update", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "2.0.0-rc.1", "@angular/compiler": "2.0.0-rc.1", "@angular/core": "2.0.0-rc.1", "@angular/platform-browser": "2.0.0-rc.1", "@angular/platform-browser-dynamic": "2.0.0-rc.1", "@angular/router": "2.0.0-rc.1", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.3", "rxjs": "5.0.0-beta.6", "systemjs": "0.19.26", "zone.js": "^0.6.12" }, "devDependencies": { "angular-cli": "^1.0.0-beta.0", "clang-format": "^1.0.35", "codelyzer": "0.0.14", "ember-cli-inject-live-reload": "^1.4.0", "jasmine-core": "^2.4.1", "jasmine-spec-reporter": "^2.4.0", "karma": "^0.13.15", "karma-chrome-launcher": "^0.2.3", "karma-jasmine": "^0.3.8", "protractor": "^3.3.0", "ts-node": "^0.5.5", "tslint": "^3.6.0", "typescript": "^1.8.10", "typings": "^0.8.1" } }

All those dependencies are added and included in our src/index.html file. All of the setup that was in the Angular quickstart are now taken care of for us.

Check out the index.html file and you’ll see the scripts loaded and System.js started:

ng new options

  • — dry-run (alias d): Only output the files created and operations performed. It doesn’t actually create the project.
  • — verbose (alias v): Show more information
  • — skip-npm: Don’t run any npm commands like installing dependencies
  • — skip-git: Don’t create a new git repo for this project
  • — directory: Specify the directory you want to create this project in

Initialize a New Application


Originally published at www.laravelfeed.com.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.