"Drupal Basics" was retired on February 24, 2020.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Using the Angular CLI

Well done!

You have completed Using the Angular CLI!

Sign up for Treehouse Back to Library

Creating and Serving an Application

7:17 with James Churchill

Let's create a new Angular app using the CLI and learn how to run it locally.

ng new Options

  • --dry-run Run through without making any changes. Will list all files that would have been created when running "ng new".
  • --verbose Adds more details to output logging.
  • --skip-install Skip installing packages.
  • --skip-commit Skip committing the first commit to git.
  • --collection Schematics collection to use.
  • --directory (string) The directory name to create the app in.
  • --inline-style (boolean) Specifies if the style will be in the ts file.
  • --inline-template (boolean) Specifies if the template will be in the ts file.
  • --view-encapsulation (string) Specifies the view encapsulation strategy.
  • --routing (boolean) Generates a routing module. Very useful if you know you're going to use routing in your app.
  • --prefix (string) (Default: app) The prefix to apply to generated selectors.
  • --style (string) (Default: css) The file extension to be used for style files.
  • --skip-tests (boolean) Skip creating spec files.
  • --skip-git (boolean) Skip initializing a git repository.
  • --minimal (boolean) Create a minimal app (no test structure, inline styles/templates).
  • --service-worker (boolean) Installs the @angular/service-worker.

ng serve Options

  • --target (String) (Default: development) Defines the build target.
  • --environment (String) Defines the build environment.
  • --output-path (Path) Path where output will be placed.
  • --aot (Boolean) Build using Ahead of Time compilation.
  • --sourcemaps (Boolean) Output sourcemaps.
  • --vendor-chunk (Boolean) Use a separate bundle containing only vendor libraries.
  • --common-chunk (Boolean) (Default: true) Use a separate bundle containing code used across multiple bundles.
  • --base-href (String) Base url for the application being built.
  • --deploy-url (String) URL where files will be deployed.
  • --verbose (Boolean) (Default: false) Adds more details to output logging.
  • --progress (Boolean) (Default: true) Log progress to the console while building.
  • --i18n-file (String) Localization file to use for i18n.
  • --i18n-format (String) Format of the localization file specified with --i18n-file.
  • --locale (String) Locale to use for i18n.
  • --missing-translation (String) How to handle missing translations for i18n.
  • --extract-css (Boolean) Extract css from global styles onto css files instead of js ones.
  • --watch (Boolean) (Default: true) Rebuild on change.
  • --output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode.
  • --poll (Number) Enable and define the file watching poll time period (milliseconds).
  • --app (String) Specifies app name or index to use.
  • --delete-output-path (Boolean) (Default: true) Delete output path before build.
  • --preserve-symlinks (Boolean) (Default: false) Do not use the real path when resolving modules.
  • --extract-licenses (Boolean) (Default: true) Extract all licenses in a separate file, in the case of production builds only.
  • --show-circular-dependencies (Boolean) (Default: true) Show circular dependency warnings on builds.
  • --build-optimizer (Boolean) Enables @angular-devkit/build-optimizer optimizations when using --aot.
  • --named-chunks (Boolean) Use file name for lazy loaded chunks.
  • --subresource-integrity (Boolean) (Default: false) Enables the use of subresource integrity validation.
  • --bundle-dependencies (none, all) (Default: none) Available on server platform only. Which external dependencies to bundle into the module. By default, all of node_modules will be kept as requires.
  • --service-worker (Boolean) (Default: true) Generates a service worker config for production builds, if the app has service worker enabled.
  • --skip-app-shell (Boolean) (Default: false) Flag to prevent building an app shell
  • --port (Number) (Default: 4200) Port to listen to for serving.
  • --host (String) (Default: localhost) Listens only on localhost by default.
  • --proxy-config (Path) Proxy configuration file.
  • --ssl (Boolean) (Default: false) Serve using HTTPS.
  • --ssl-key (String) (Default: ssl/server.key) SSL key to use for serving HTTPS.
  • --ssl-cert (String) (Default: ssl/server.crt) SSL certificate to use for serving HTTPS.
  • --open (Boolean) (Default: false) Opens the url in default browser.
  • --live-reload (Boolean) (Default: true) Whether to reload the page on change, using live-reload.
  • --public-host (String) Specify the URL that the browser client will use.
  • --disable-host-check (Boolean) (Default: false) Don't verify connected clients are part of allowed hosts.
  • --serve-path (String) The pathname where the app will be served.
  • --hmr (Boolean) (Default: false) Enable hot module replacement.

Additional Learning

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    I'm gonna browse to my Desktop directory, but 0:00
    you can use whatever directory you'd like. 0:00
    To generate a new app, we'll use the ng new command, followed by the name for 0:04
    our application. 0:09
    How about my dash first dash app. 0:10
    And press enter to execute the command. 0:16
    The CLI creates a new directory named my first app. 0:19
    Within that directory, it generates our app's source files and 0:22
    directories based upon our app name and the official angular style guide. 0:26

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up