"Getting Started with WordPress" was retired on February 3, 2017. You are now viewing the recommended replacement.

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

    Let's start with browsing to the directory or 0:00
    folder where we want the CLI to generate our app into. 0:02
    I'm gonna browse to my Desktop directory, but 0:06
    you can use whatever directory you'd like. 0:09
    To generate a new app, we'll use the ng new command, followed by the name for 0:13
    our application. 0:18
    How about my dash first dash app. 0:19
    And press enter to execute the command. 0:25
    The CLI creates a new directory named my first app. 0:28
    Within that directory, it generates our app's source files and 0:31
    directories based upon our app name and the official angular style guide. 0:35
    Then it installs all of our apps NPM dependencies. 0:40
    In addition to creating a root project directory, generating our app source files 0:45
    and directories, and installing its NPM dependencies, 0:49
    the CLI configures Karma for unit testing and Protractor for end-to-end testing. 0:53
    It also sets up environment files for both the development and 1:00
    production environments. 1:04
    We'll take a closer look at our environments in just a bit. 1:06
    And finally, it initializes git and makes an initial commit. 1:09
    All right, now that we've generated our new app, let's run it so 1:14
    we can preview it in a browser. 1:17
    First, we need to browse into our project's directory. 1:20
    Then we use the ng serve command to run our app. 1:25
    The CLI loads its configuration from the .angular-cli.json file, 1:30
    which we'll take a look at in just a second. 1:34
    It then runs webpack to build and bundle all of our app's JavaScript and 1:37
    CSS code and finally runs the webpack-dev-server. 1:41
    To preview the app, open a browser and browse to the URL 1:45
    http://localhost:4200. 1:49
    And here's our app. 1:57
    It's not much to look at and it's just a single page with no routing. 1:58
    But it's a full fledged angular application that took us 2:03
    a fraction of the time to create than if we had built it out manually ourselves. 2:07
    Notice that the ng serve command doesn't exit and return you to the command prompt. 2:12
    The file system is being watched so that any changes to files in our app 2:17
    will cause it to be recompiled and reloaded in the browser. 2:22
    When you're ready to stop the process, you can press control C. 2:26
    But we won't do that right now. 2:30
    Let's open another terminal window by pressing command T on MacOS or 2:31
    on Windows you can open another instance of the command prompt. 2:36
    Then we can open our project in Visual Studio Code, by typing code space dot. 2:40
    Visual Studio Code is a free open source, 2:50
    cross platform code editor developed by Microsoft. 2:53
    It has great support for working with typescript. 2:56
    So it's a natural fit for doing angular development. 2:59
    In the root of our project, there are a number of configuration files. 3:03
    .angular-cli.json, which is the angular CLI configuration file. 3:07
    Editorconfig, which is a universal configuration file for text editors. 3:14
    Karma.conf.js, which is the karma config for unit testing. 3:19
    Package-lock.json and package.json, which is our configuration for mpm. 3:25
    Protractor.conf.js, which is the the protractor configuration for 3:32
    end to end testing. 3:38
    Tsconfg.json, which is our type script configuration and 3:39
    tslint.json which is our configuration for typescript linting. 3:43
    The e2e folder contains a simple protractor end to end test. 3:50
    The src or source folder contains the source code and assets for our app. 3:56
    Index.html, this is the html page for our app. 4:04
    main.ts, this is the typescript file that bootstraps our app module. 4:09
    Polyfills.ts includes polyfills needed by angular and is loaded before the app. 4:14
    You can add your own extra polyfills to this file as needed. 4:20
    Styles.css, here we can add any global styles to the style sheet. 4:25
    Test.ts, this is a typescript file that supports the unit testing with Karma. 4:31
    Tsconfig.app.jason and 4:37
    tsconfig.spec.json contain additional typescript configuration. 4:39
    Typings.d.ts allows you to define additional typescript typings. 4:45
    The code that's included in this file enables support for system js. 4:51
    We don't need this code as we're using Webpack, but 4:56
    there is no harm in leaving it here as it is. 4:59
    The app folder contains our app code. 5:02
    App.component.ts is the class for our apps only component. 5:06
    And app.module.ts is our app's app module. 5:11
    The assets folder is where we can include any static assets for our app. 5:16
    Anything that we put into the assets folder will be copied over as is 5:21
    when we do a build. 5:25
    The environments folder contains a file for each of our defined environments. 5:28
    We can define values here that need to vary between development and production. 5:34
    Then you can import and reference those values in code. 5:39
    In the main.ts file we can see how the production environment variable is being 5:46
    used to know when to call the angular enableProdMode method, 5:50
    which disables Angular's development mode. 5:53
    Remember that we left the ng serve command running. 5:59
    Let's test live reloading. 6:02
    I'm making a change to our app. 6:04
    Let's go into the app.component.ts file. 6:08
    And change the app components title property. 6:13
    How about we change it to My First CLI App and save. 6:19
    And if we switch back to the browser we'll see that our new title is now being 6:28
    displayed, demonstrating that the ng serve command noticed our file change, 6:32
    recompiled our app, and reloaded it in the browser. 6:37
    So how does our project differ from non-CLI projects? 6:44
    For starters, you might have noticed that there isn't 6:48
    a webpack.config.js configuration file in the root of our project. 6:51
    Configuring and running Webpack is fully handled by the CLI. 6:58
    For the majority of apps, this approach works great. 7:03
    But if you ever need to manually configure web pack, there is an escape patch. 7:06
    You can eject your project from the CLI. 7:11
    We'll talk about more of this process later in this workshop. 7:14

    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