Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll learn to use the CLI to create and deploy a production build of our application.
Build Optimizer
The Angular Build Optimizer provides the following benefits:
- Smaller Bundles - Removes code that your app doesn't need to run.
- Class Fold - Static properties are folded into ES5 classes.
- Scrub File - Angular decorators, property decorators and constructor parameters are removed, while leaving non-Angular ones intact.
- Prefix Functions and Classes - Marks functions and classes as pure so they can optimized out when minifying code.
For more information about the Build Optimizer, see the following resources:
AOT Compilation
AOT (ahead-of-time) compilation provides the following benefits:
- Fewer Requests - Templates and styles are precompiled into the app eliminating AJAX requests to get those resources.
- Faster Rendering (i.e. app load times) - The Angular app is precompiled, so the compilation step can be eliminated with the app is loading in the browser.
- Smaller Downloads - The Angular compiler can be eliminated from the Angular framework, which is roughly half the size of the download.
- Detect Template Errors Sooner - The AOT compiler detects and reports template binding errors during the build step before users can see them.
For more information about AOT see https://angular.io/guide/aot-compiler.
Setting the Build Output Path in Configuration
As an alternative to using the ng build command's --output-path option, you can configure the build output path via the .angular-cli.json configuration file's apps[].outDir property.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "test-app"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
Additional Learning
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's use the ng serve
command to run our app.
0:00
In Visual Studio Code,
let's collapse some of these folders.
0:08
And notice that the ng serve command
doesn't make any changes to our project,
0:14
no new folders or files were created.
0:20
This is due to the ng serve command not
saving build applet to the file system,
0:22
the build is done entirely in memory.
0:27
In order to keep things as perform
it as possible when recompiling and
0:30
reloading the app in the browser.
0:34
This approach works great while
we're developing our app.
0:36
But how do we get a build of our app
that we can deploy to a server or
0:39
hosting service?
0:44
To do that we can use
the ng build command.
0:45
The cli loads it's configuration
from the angular cli Json file,
0:54
runs web pack to build and
bundle all of our apps,
0:58
JavaScript and CSS code, and
rights the result to the disk directory.
1:02
The output path can be
set via configuration or
1:07
by using the output path option, for
more information, see the teacher's notes.
1:10
If we expand the disk directory,
1:19
we can see that the cli copied
over two static assets.
1:21
Our favicon.ico file and
our index.html file,
1:25
it also generated five bundles inline,
1:31
main, polyfills, styles, and vendor.
1:36
The cli also generated source maps for
each of those bundles.
1:41
Running the ng build command
without any options,
1:50
will create a development
build by default.
1:53
To create a build that's optimized for
deployment to a production server,
1:56
we can add the target option and
set its value to a value of production.
2:00
Or we can use the --prod alias.
2:08
When creating a production build,
the cli will skip creating source maps.
2:14
It also enables both
the build optimizer and
2:18
AOT or
ahead-of-time compilation by default.
2:22
Enabling the build optimizer
results in smaller bundles,
2:26
by removing code that your
app doesn't need run.
2:30
This is also known as tree shaking,
2:33
enabling AOT compilation results
in faster rendering in the client.
2:36
Viewer requests and
a smaller overall download payload,
2:41
by reducing the size of the angular
framework by almost half.
2:45
Production Builds also
make use of Uglifying,
2:50
Uglifying is a process of optimizing
your code for the browser.
2:54
The final result is code that you
wouldn't want to read and maintain,
2:58
hence the name Uglifying.
3:03
For a complete list of the differences
between development and Production Builds
3:05
or for more information about the build
optimizer or AOT, see the teacher's notes.
3:10
Now let's run the command to
create a production build.
3:16
Once the command has finished,
let's switch to Visual Studio Code.
3:25
There are fewer artifacts when
creating a production build,
3:31
our static assets are still copied over.
3:34
And the cli has helpfully
generated a third party
3:37
licenses text file containing
the licenses for our app's dependencies.
3:40
There are now four bundles, inline,
main, polyfills, and styles.
3:45
To make our app available to our users,
3:51
we just need to deploy
these files to our server.
3:54
To demonstrate this,
we can use GitHub's pages service,
3:56
which allows you to easily host websites
directly from a GitHub repo for no charge.
4:00
To get started with this process,
we'll create a production build.
4:06
So, ng build --prod, will configure GitHub
pages to surf from a directory name docs.
4:10
So let's use the output path option
to change the output directory.
4:18
Our app will be served
from a sub-directory, so
4:27
we need to specify the base href
to be the name of that directory,
4:29
which will be the name of our app,
myawesomeapp.
4:33
We can do that by using
the base href option.
4:36
This option is necessary to set, so
4:48
our app can successfully load
our JavaScript and CSS bundles.
4:51
And that's it, go ahead and
press enter to run the command.
4:55
Now let's commit these changes,
5:05
git add dot && git commit -m,
5:10
with a message of Added production build.
5:14
And let's push our changes to
the remote repo on GitHub.
5:19
Here's our GitHub repo,
5:27
to enable GitHub pages we need
to go into our repo settings.
5:29
Scroll down to the GitHub pages section.
5:36
For our source select the master
branch /docs folder option,
5:42
then click the save button.
5:48
If we scroll back down to
the GitHub pages section,
5:51
we can see the URL for our app.
5:56
I've got a custom domain configured for
my GitHub organization, so
5:59
your URL will look a little
different than this one.
6:03
By default, URLs for
GitHub pages websites will be your
6:07
<username>.github.io/ then
the name of your repository.
6:12
I'll just click on the link, and
here's our app running on GitHub pages.
6:18
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up