Creating and Serving an Application7: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-runRun through without making any changes. Will list all files that would have been created when running "ng new".
--verboseAdds more details to output logging.
--skip-installSkip installing packages.
--skip-commitSkip committing the first commit to git.
--collectionSchematics 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
--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.
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
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
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