Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using the Angular CLI!
You have completed Using the Angular CLI!
Preview
To wrap-up this workshop, let's take a quick look at how the CLI supports testing and how to eject your project from the CLI if you need to manually configure webpack.
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
The CLI also helps us with
writing higher quality code
0:00
by making it easy to run any of our
projects unit tests or end to end tests.
0:04
When we created our app, and
also when we added a component and
0:09
service, the CLI added
spec files to our project.
0:13
Here's the spec file for
our app component.
0:17
And for our MyTestComponent,
and for our TestContentService.
0:22
These spec files are just simple stubs or
shells, we still need to update these
0:28
files with sensible unit tests
that'll test our apps functionality.
0:32
The CLI makes it easy to
run these unit tests,
0:37
to do that we can use the ng test command.
0:40
Our tests will be ran after
a build is executed via Karma, and
0:44
it will automatically watch our files for
changes and rerun our tests.
0:48
If Karma does not open a tab in your
browser you can grab the URL here in
0:53
the terminal and manually browse to it
0:57
Here we can see that we have 5 specs,
and 0 failures.
1:06
While unit tests give us a way to
test isolated parts of our app,
1:13
end to end tests give us a way
to test our app holistically.
1:17
Because end to end tests are concerned
about testing the functionality of our
1:22
app, instead of isolated parts
of our app like components or
1:25
services, they're defined
in the e2e folder.
1:28
Instead of being defined next to the item
that they're testing like unit tests are.
1:33
When we created our app, using CLI,
it generated a simple end to end test,
1:37
here in the e2e folder,
in the root of our project.
1:43
We can use the CLI to run this end to
end test using the ng e2e command.
1:47
End to end tests are ran via protractor,
for more information on how to test
1:55
Angular apps using unit tests and
end to end tests see the teacher's notes.
1:59
As mentioned earlier in this workshop, the
Angular CLI uses webpack under the covers.
2:06
The CLI hides the webpack configuration
to shield you from its complexity.
2:11
If you ever need to customize
the configuration of webpack,
2:16
you can eject your app from the CLI
using the ng eject command.
2:20
And now, we have a webpack.config.js
file in the root of our project that we
2:30
can tweak to our hearts content.
2:35
Ejecting an app from the CLI is
a one way trip, so plan accordingly.
2:37
Make sure that all of your current changes
have been committed or stashed, so
2:42
you can easily undo the changes
made by ejecting your app.
2:47
Using Angular for a simple web page like
ours, well, that doesn't make any sense,
2:52
Angular is for building apps.
2:57
If you have an idea for an app I'd
encourage you to practice using the CLI
3:00
by starting to build out your own app.
3:04
If you don't have an idea for an app,
you could always walk through the Tour
3:06
of Heroes tutorial on the official
Angular Docs website.
3:09
This tutorial uses the CLI to build
out a simple but functional app.
3:14
To learn more about the Angular CLI be
sure to visit the CLIs GitHub repo wiki.
3:19
It includes documentation and
a great set of stories or
3:25
recipes that you can use to learn
how to do more with the CLI.
3:29
Enjoy using the Angler CLI,
and happy coding.
3:34
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