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?

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

Made with Slides.com