Stone River eLearning

The Angular CLI is the interface through which developers interact with an Angular application. Learning the ins and outs of the CLI is fundamental to becoming proficient with Angular. 
This course is targeted and new and experienced Angular developers alike. Before starting this course, you should be familiar with JavaScript.

Course Introduction

Introduction to the CLI

ng new is likely the first command you'll use for each new Angular application created using the CLI. It creates a new application for you, and allows you to skip the manual setup that would otherwise be needed.  There are many flags that can be used with ng new, and you can see a full list of those here in the Angular CLI docs [https://angular.io/cli/new#options]. The ones that we cover in this video are:  --dryRun, or -d: Allows you to run a command to see what the output would be, but doesn't actually execute the command --routing: Generates a routing module for the application --style: Sets the default stylesheet format for the application. The default if CSS, but you can also use Sass, SCSS, Less, or Stylus --prefix: Sets a default prefix for components and directives. The default is app, but you can change that globally here. You can also change it on a per module or per component/directive basis if you'd like --skip-git, or -g: Skips the git repo creation, which is useful if you're creating an application inside a previously created repository --skip-install: Skips the npm install step, so NPM packages won't be added automatically You can see all the docs on ng new right here [https://angular.io/cli/new].

Angular CLI Basics - ng new

ng new Exercise

ng new Exercise Review

ng new Conclusion

Angular CLI Basics - Introduction

Angular CLI Basics - ng generate

In this video, we cover how to generate modules using the Angular CLI. To generate a module, you need to run the following command:

ng generate module module-name

You can add a number of flags after the module name, depending on what you need. The flags we covered in this section are:

--flat
--module
--routing
--route
For more information on generating modules, and for a list of all the flags available when generating modules, you can check out the docs [https://angular.io/cli/generate#module].

If you'd like to learn more about modules in Angular and their role, read this section [https://angular.io/guide/architecture-modules] of the Angular documentation.

Introduction to ng generate module

ng generate module Exercise

ng generate module Exercise Review

ng generate module Conclusion

Angular CLI Basics - ng generate module

In this video, we cover how to generate components using the Angular CLI. To generate a component, you need to run the following command:

ng generate component component-name

You can add a number of flags after the component name, depending on what you need. The flags we covered in this section are:

--export
--module
--prefix
--selector
In addition to the --module flag, which adds a component to a module, you can add a component to a module by putting the component in the folder of a module, closest to where the module is located. So, if you have a SharedModule in a shared folder, you can add a component to that module with the following command:

ng g c shared/component-name

For more information on generating components, and for a list of all the flags available when generating components, you can check out the docs [https://angular.io/cli/generate#component].

If you'd like to learn more about components in Angular, including how to use them and their role in an application, read this section [https://angular.io/guide/architecture-components] of the Angular documentation.

ng generate : component

ng generate component Exercise

ng generate component Exercise Review

In this section, we learned how to generate components using the CLI. If you have any questions, check out the docs! [https://angular.io/cli/generate#component]

ng generate component Conclusion

Angular CLI Basics - ng generate component

In this video, we cover how to generate guards using the Angular CLI. To generate a guard, you need to run the following command:

ng generate guard guard-name

You can add a number of flags after the component name, depending on what you need. The flags we covered in this section are:

--implements
--flat
There are three valid values for the --implements flag: CanActivate, CanActivateChild, and CanLoad. You can select one or more of these options by repeating the --implements flag the desired number of times. If you don't use this flag, the CLI will show you a prompt asking you to select at least one value.

For more information on generating guards, and for a list of all the flags available when generating guards, you can check out the docs [https://angular.io/cli/generate#guard].

If you'd like more information on route guards, like what they are and what their purpose is, read this section [https://angular.io/guide/router#milestone-5-route-guards] of the Angular documentation.

ng generate : Guard

ng generate guard Exercise

ng generate guard Exercise Review

ng generate guard Conclusion

Angular CLI Basics - ng generate guard

In this video, we cover how to generate pipes using the Angular CLI. To generate a pipe, you need to run the following command:

ng generate pipe pipe-name

You can add a number of flags after the pipe name, depending on what you need. The flags we covered in this section are:

--export
--module
--flat
In addition to the --module flag, which adds a pipe to a module, you can add a pipe to a module by putting the pipe in the folder of a module, closest to where the module is located. So, if you have a SharedModule in a shared folder, you can add a pipe to that module with the following command:

ng g p shared/pipe-name

For more information on generating pipes, and for a list of all the flags available when generating pipes, you can check out the docs [https://angular.io/cli/generate#pipe].

If you'd like to know more about pipes and their roles in Angular apps, read this guide [https://angular.io/guide/pipes] from the Angular documentation.

ng generate: Pipe

In this exercise, you should have created two new pipes:

A full-name pipe added to and exported from the SharedModule contained in its own folder
A phone-number pipe added to and exported from the SharedModule, explicitly using the --module flag
In this video, we'll go over the solutions to the exercise.

If you have quetsions, go back and rewatch the videos in this course, or go check out the documentation [https://angular.io/cli/generate#pipe].

Angular CLI Basics - ng generate pipe

ng generate pipe Exercise Review

ng generate pipe Conclusion

In this video, we cover how to generate services using the Angular CLI. To generate a service, you need to run the following command:

ng generate service service-name

You can add a number of flags after the component name, depending on what you need. The flags we covered in this section are:

--skipTests
--flat
Remember that when generating services with the CLI, modules will not be updated. That's because in the latest versions of Angular, services have a setting that is added to the decorator on a service that makes the service be provided in a location of the application. By default, that location is "root". That's the preferred method of creating services, so when you add a service to a folder it's done for organization of code only. Don't expect to see modules updated after adding a new service.

For more information on generating services, and for a list of all the flags available when generating services, you can check out the docs [https://angular.io/cli/generate#service].

If you'd like to learn more about services in general in Angular, and their roles in an application, read this section [https://angular.io/guide/architecture-services] in the Angular documentation.

ng generate : Service

ng generate service Exercise

In this exercise, you should have created two new services:

A thinkster-io service contained in its own folder
An auth service that doesn't have the tests generated
In this video, we'll go over the solutions to the exercise.

If you have quetsions, go back and rewatch the videos in this course, or go check out the documentation [https://angular.io/cli/generate#service].

ng generate Service Exercise Review

In this exercise, you should have created two new services:

A thinkster-io service contained in its own folder
An auth service that doesn't have the tests generated
In this video, we'll go over the solutions to the exercise.

If you have quetsions, go back and rewatch the videos in this course, or go check out the documentation [https://angular.io/cli/generate#service].

ng generate service Conclusion

We're now done with the ng generate section of the course! We went over a lot of information in this section. We learned how to:

Generate code for our application using the ng generate command
How to pair modifiers — like module, component, guard, pipe, and service — with the generate command
How to alter the default behavior using flags
You should now be comfortable running this command with any of the modifiers listed above and the associated flags. Some of those flags were adding components, guards and pipes to specific modules; creating services in their own folder; and setting up routing for a module. If you have any questions, go back and watch the video on that section again or got check out the docs [https://angular.io/cli/generate].

ng generate Conclusion

Angular CLI Basics - ng generate service

ng serve is a great command to use when developing your application locally. It starts up a local development server, which will serve your application while you are developing it. It is not meant to be used for a production environment.

While the server is running, it will automatically reload if a file is changed, making the development process quick and easy.

We talk about two flags that you can use with this command. They are:

--port: This flag allows you to change the port on which the application runs. The default port is 4200, and can remain that way if you'd like.
--open, or -o: After the application is built and the development server started, the application opens in your default browser on the correct port
There are some other flags that you can use. If you'd like to check out a complete list, check out the documentation [https://angular.io/cli/serve].

ng serve

ng serve Exercise

Let's go over the exercises for this section. You should have run something similar to the following commands:

ng serve --port 8000
ng serve --open
You may have combine those into on command, or you may have used the alias for --open, -o. Both of those scenarios are great.

If you'd like to read more about ng serve, go to the documentation [https://angular.io/cli/serve].

ng serve Exercise Review

ng serve builds your application and starts it up on a local development server. It makes it simple and easy to run the application during development. This is not meant for production situations, but will be great during local development.

If you have any questions, or would like to see more flags that can be used with this command, check out the docs [https://angular.io/cli/serve].

ng serve Conclusion

Angular CLI Basics - ng serve

ng build is the command you use when you're ready to build your application and deploy it. The CLI will analyze the application and build the files, all while optimizing the application as best as it can. It will then output the files in the dist/your-project-name folder, ready to be placed on a server and ready to be visited.

We talked about two flags to use with this command:

--configuration: This flag sets the build configuration to use for your application. The value must be present in the angular.json file, in the build.configurations object.
--prod: This flag is shorthand for --configuration=production. This is the desired command to run when building your application for a production environment
There are more flags you can use with the command, but these are the ones I've used most frequently. Most of the other flags are already set by options in the angular.json file. However, if you'd like to look at those flags, you can see more about them in the documentation[https://angular.io/cli/build].

ng build

In this section, build your application twice in the following ways:

Setting the configuration to production using the shorthand flag
Setting the configuration to development
To successfully accomplish the second exercise, you need to have a development configuration entry in the build.configurations object in your angular.json file. You can copy what I did in the previous video where I duplicated the production environment entry and then renamed it to development, or you can click on this link and go to this gist [https://gist.github.com/pjlamb12/803ecf7e433eede87f90544ee5d36947]. Copy the contents of the gist and replace your angular.json contents with the contents of the gist. Copying the contents of the gist will only work, however, if you've followed along with me throughout the course.

ng build Exercise

ng build Exercise Review

We you!

Help spread the word about this tutorial!

 
ng build builds your application for you and prepares it for being deployed to a server in whichever test environment you'd like to deploy it. You can set the configuration using the --configuration or --prod flag, and have more options for flags listed in the documentation [https://angular.io/cli/build].

ng build Conclusion

Thanks for watching Thinkster.io's Angular CLI Basics course! In this course, you learned how to:

Create a new application using the Angular CLI
Generate modules, components, guards, pipes, and services for your application
Serve the application locally while developing it
Build your application to deploy to different environments
If you have any questions about the CLI or any of the commands we covered, make sure you go to the CLI documentation at angular.io/cli [https://angular.io/cli]. You can also learn about other things you can do with the CLI there.

Please share this course with others, and make sure to check out my other courses here on Thinkster.io as well.

If you have any questions, make sure to reach out to me on Twitter, Instagram, or Dev.to @prestonjlamb, on GitHub @pjlamb12, or at prestonlamb.com [https://www.prestonlamb.com/].

If you'd like to learn how to deploy your applications, check out my course 'Deploying Apps to Netlify' [https://thinkster.io/tutorials/deploying-apps-to-netlify].

Angular CLI Basics

What you'll learn

Explore more technology skills