Angular CLI

http://cli.angular.io

https://github.com/angular/angular-cli

What is it?

• Angular CLI
  • Angular = Angular2
  • CLI = Command Line Interface
• Application quick start
• Code blueprints and build tooling
• Architecturally based on Ember-CLI

Who is it?

• Part of the official Angular project inside Google
• Filipe Silva (also contributing to Angular docs and the Webpack Dev Server)
• Hans Larson (also working on Angular Material 2)
• Mike Brocchi

Where is it?

• Deployed via npm
      (https://www.npmjs.com/package/angular-cli)
• Official website
      (https://cli.angular.io/)
• Open source on GitHub
      (https://github.com/angular/angular-cli)

How is it?

• Current version is v1.0.0-beta.17 (as of 10/7)
• Watch 484 / Star 4,311 / Fork 665
• 272 Open Issues, 1,497 Closed
• 40 Pull Requests

Why would I use it?

• An opinionated approach to structuring your projects
• Based on the Angular style guide
      (https://angular.io/styleguide)
• Create a new project
• Generate various Angular artifacts
• Scaffold your project
  • Tests (unit and end to end)
  • Lint
  • Format
  • Serve
• Package your project for deployment
      development, production, and other environments

Does it work well?

• Routing was removed
• Moved default build from SystemJS to Webpack
  • Lots of outdated docs and tutorials
• Importing third-party libraries is better
• Requires Node 4+ and NPM 3+
• Work in progress

ng new

​Creates a new directory and runs ember init in it.

• --dry-run (Boolean) (Default: false)
• --verbose (Boolean) (Default: false)
• --link-cli (Boolean) (Default: false)
• --skip-npm (Boolean) (Default: false)
• --skip-bower (Boolean) (Default: true)
• --skip-git (Boolean) (Default: false)
• --directory (String)
• --source-dir (String) (Default: src)
• --style (String) (Default: css)
• --prefix (String) (Default: app)
• --mobile (Boolean) (Default: false)
• --routing (Boolean) (Default: false)
• --inline-style (Boolean) (Default: false)
• --inline-template (Boolean) (Default: false)   

ng serve

Builds and serves your app, rebuilding on file changes.   

• --port (Number) (Default: 4200)
• --host (String) (Default: localhost) Listens on all interfaces by default
• --proxy-config (Path)
• --watcher (String) (Default: events)
• --live-reload (Boolean) (Default: true)
• --target (String) (Default: development)
• --environment (String) (Default: )
• --ssl (Boolean) (Default: false)
• --aot (Boolean) (Default: false)

ng lint

Lints code in existing project

   ng test

Runs your app's test suite.

• --watch (Boolean) (Default: true)
• --browsers (String)
• --colors (Boolean)
• --log-level (String)
• --port (Number)
• --reporters (String)
• --build (Boolean) (Default: true)

ng build

Builds your app and places it into the output path

(dist/ by default).   

• --target (String) (Default: development)
• --environment (String) (Default: )
• --output-path (Path) (Default: null)
• --watch (Boolean) (Default: false)
• --watcher (String)
• --suppress-sizes (Boolean) (Default: false)
• --base-href (String) (Default: null)
• --aot (Boolean) (Default: false)

ng build --aot

• Ahead of time compiler
• Compiles Angular templates during build step
• No need to download compiler to the client
• Improves startup performance
• Dead code elimination further reduces deployment footprint (tree shaking)

Webpack

• In beta.14, a move from SystemJS to Webpack was made in the project
• Not sure if SystemJS will be making a comeback as an option

Build time dependency

• PhantomJS for unit testing
• npm install --save-dev karma-phantomjs-launcher
• edit karma.conf
• ng test --watch false

ng generate <artifact>

• component 
• directive
• pipe
• service
• module
• interface, class, enum
• route (no longer)

Thank You

https://github.com/ng-columbus/angular-cli