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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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