Master the basics of the Angular CLI. In this lesson, we cover the most powerful features of the new Angular CLI v6.0 https://angularfirebase.com/lessons/basics-angular-cli/

- CLI Docs https://github.com/angular/angular-cli
2024-02-04T07:36:11.319Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
015e7eb2-e6af-4f60-ba0f-8c35c0c8e5fb
2c614c7a9520d8f1772121318a4bba929bc13189b2d4071e1eb981248a604401
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, I'm starting a new video series called The Basics.
It will consist of 5 to 10 videos designed to teach you the fundamentals of Angular 6.
To kick things off, we're going to start with one of the most powerful features of Angular, which is the CLI.
A ton of new features were added to the CLI in version 6, and my goal is to show you how to use it effectively to dramatically speed up the development time of your app.
If you're new to the channel, make sure to like and subscribe and grab the full source code from Angular Firebase of COM.
So the main goal of Angular's command line interface is to automate things that you would otherwise have to do manually, and it does a really good job of that compared to what other web frameworks offer.
The reason I chose it as the topic for this first basics video though, is because you really need to know how to use the CLI before you can use Angular effectively.
To get started, you wanna bring up a command line terminal, which I'm doing here in Versus Code, then run npm install angular cli flag global.
That should install version 6.0 or greater on in your system, giving you access to the ng command.
You can verify the install by running ng flag v, which will print out some information about your local development environment.
Then the first command that you'll run is NG new.
The new command will generate all of the boilerplate code that you need to start a brand new Angular project from scratch.
You'll go ahead and say ng new with the name of your app, and then there's a number of different options that you can pass in with the command.
Let's say you wanna use a CSS extension.
You can simply pass in the style flag along with Sass, Less, Stylus, or whatever you wanna use.
And if you wanna take advantage of Angular's router, you can pass in the of routing option, and that will automatically generate the router for you.
There's a bunch of other options which you can check out on the documentation on GitHub, but I use these two options very frequently.
When you execute this command, it's going to generate a new directory based on the name of your app, then it creates all the files necessary to build and test an Angular app.
Now that we've created this directory, we'll go ahead and run code with the name of that directory to open the project up in Versus Code.
If you're not using Versus Code, just open up the project in your IDE.
As you can see here, we have all of our files generated and all of our node modules installed.
But there's one file that's special when it comes to the CLI, and that's the Angular JSON file.
For right now, we don't have to modify anything inside this file, but just know that it exists to control the behavior of the CLI.
As you become a more advanced Angular user, you'll be able to do some very powerful things here to build your own libraries, control the build process of your app, and build your own custom schematics for boilerplate code, but we'll cover that stuff in a more advanced video.
What we wanna do next is make sure that our app works properly by running ng serve.
Run the command from the command line and add the o flag to have it automatically open up in your browser.
The command will compile all of your code with webpack and then spin up a web server so we can view it on local host 42 100.
And the cool thing about it is that it will rebuild your code on every change.
Let's go into the source code for this app in the app component.
And instead of saying welcome to title, we'll say hello, world, title.
When we make our changes, we see them instantly reflected on the app itself.
Now that we have a working skeleton app, let's look at how we can generate boilerplate code to build our components, services, pipes, etcetera.
When you call generate, you're pointing to a schematic.
A schematic can be thought of as a template that has some specific rules that can be followed based on the command line arguments that you pass to it.
Every schematic takes a different set of arguments, and we can figure out what those arguments are by running ng generate with the schematic name, in this case, component, and then flag help.
As you can see here, it prints out a bunch of different options that we can pass into the schematic when it generates the code for us.
This is an important concept because it's not just generating the files for us, it's also putting them in a specific spot and updating the other files that depend on them.
For example, in Angular, we have a concept of modules.
So when we generate a component, we need to declare that component in its parent module.
So let's look at the most common use case.
We'll run ng generate component and give it a name of cool.
You'll notice that it creates 4 different files, but it also updates our existing app module.
As you can see here, it added the cool component to the declarations in the g module and also handled the TypeScript import for us.
So it eliminates those tedious little things that are necessary for the app to work.
Then if we look in the cool directory, you can see it generated our component files that we can use to start writing code immediately without having to do any boilerplate setup.
Once you get comfortable with the CLI, you'll be able to shorten these commands with aliases.
For example, you might run ng generate component neat.
Then we'll tell it not to generate our testing file, then we'll also give it an inline template and an inline style sheet with the t and s flags.
Just like before, it generated the component directory and updated the app module.
But this time, it only generated one file because we told it to use an inline template and style sheet, so all of that code is contained directly in the component type script.
That just shows you how the CLI can give you flexibility based on your developer preferences.
As an Angular developer, one thing you should be doing is compartmentalizing your code into NG modules.
By default, the CLI will import a component that's generated into your root app module.
But what if you're trying to generate a component for a feature module?
Let's see how we might handle that.
1st, we'll generate a module called awesome.
Now let's say we want to add a pipe to this module called lowercase.
There are 2 different ways we can handle this.
The most straightforward way is to just generate this pipe in the same directory as our awesome module.
When doing that, the CLI is smart enough to know to import this pipe in the awesome module and not the root app module like it normally would.
But sometimes your component might be in a different directory.
So there's another way to add it to the module, and we can do that by simply running the same command by adding the m flag for module and then point it to the awesome module.
This pipe is generated outside of the awesome directory, but it still gets imported properly and declared in the awesome module.
So just to reiterate, the generate command is super powerful, and there's a bunch of built in schematics that handle most of the boilerplate cogeneration that you'll need in Angular.
And you can even use custom schematics for third party Angular libraries such as n g or x.
So now that we've generated all this code, how are we going to test it?
One of the great things about the CLI is that it automatically sets you up for test driven development.
All we have to do is run NG test, and it's going to pull up this test runner in the browser, which is powered by Karma and Jasmine.
Every time you run the generate command, it creates a spec file that you can use to test the code that you generated.
So far, we have 7 specs, and they're all passing except for 1.
If you remember earlier, we changed the title from Welcome to App to Hello World App, and that's causing our specs to fail.
Just like NG serve, this will automatically run our specs on every file change.
So if we change this back to welcome to, it's going to rerun all the tests, and you see this time, all of them pass.
The next thing we're going to look at is an awesome new feature called NG add which was introduced in Angular 6.
It allows you to add third party packages, or libraries with 0 configuration.
For example, if we want to make our Angular app a progressive web app, There is normally a bunch of files that we would have to create manually.
But now we can just run n g add at angularpwa, and it's going to create all these files for us automatically.
In previous videos, I've showed you how to set up PWAs in Angular.
But now with ng add, those videos are pretty much obsolete because we can just run this command and it will generate the service worker config file.
It will install the dependencies for us, and it will also generate the icons necessary to be a valid PWA.
But n g ad is not limited to just packages created by the Angular team.
Any third party library can create its own schematics to automatically added as a dependency to an Angular project.
Let's take a look at the NG Bootstrap library.
Normally, to install this, we would have to run npm install and then imported into our app module, then called the forRoot method on that module.
But with ng add, we can skip this entire process and just handle all these steps with a single command from the CLI.
Run ng add ng bootstrap slash schematics.
This installs the package via npm and then also handles the import steps in our app module.
Again, this is brand new in Angular 6, so there's not many packages that have this functionality, but we'll definitely see a lot more of this in the coming year.
Now the last thing we're going to look at is ng build.
Once you finish writing all your code, you'll need a way to package and bundle your app so it can be deployed to a web host.
When you run ng build flag prod, It's going to minify and optimize your code and tree shake away any dead code that would make your bundle size larger than necessary.
In other words, it's going to package your app to be as performant as possible for the end user.
The final code can be found here in the dist folder, and this is what you would actually deploy to a web host.
For example, if you were using something like Firebase, you could just run Firebase deploy and point it to this disk folder.
And, again, your entire build process can be customized in the Angular JSON file.
If you look under architect, build, configurations, You'll see one for production with all of the options required for our production build.
So those are the core features of the Angular CLI, but let's look at a few other tricks that it has up its sleeve.
Let's imagine we have an existing app that's on an older version of Angular and we want to update it.
In Angular 6, we now have this ng update command, which will update all of our npm packages to the latest and greatest version of Angular.
Or what if we're stuck and we wanna look up something in the documentation.
We can simply run ngdoc with the search term that we wanna search and that will open up the Angular docs so we never have to leave the command line, yet another way that the CLI makes your life a little bit easier.
I'm gonna go ahead and wrap things up there.
If If this video helped you, please like and subscribe.
And if you're serious about building apps with Angular, consider becoming a pro member at angularfirebase.com.
You'll get access to exclusive content that you won't find anywhere else designed to help you build and ship your app faster.
Thanks for watching and I'll see you soon.

Speaker 0: Today, I'm starting a new video series called The Basics. It will consist of 5 to 10 videos designed to teach you the fundamentals of Angular 6. To kick things off, we're going to start with one of the most powerful features of Angular, which is the CLI. A ton of new features were added to the CLI in version 6, and my goal is to show you how to use it effectively to dramatically speed up the development time of your app. If you're new to the channel, make sure to like and subscribe and grab the full source code from Angular Firebase of COM.

So the main goal of Angular's command line interface is to automate things that you would otherwise have to do manually, and it does a really good job of that compared to what other web frameworks offer. The reason I chose it as the topic for this first basics video though, is because you really need to know how to use the CLI before you can use Angular effectively. To get started, you wanna bring up a command line terminal, which I'm doing here in Versus Code, then run npm install angular cli flag global. That should install version 6.0 or greater on in your system, giving you access to the ng command. You can verify the install by running ng flag v, which will print out some information about your local development environment.

Then the first command that you'll run is NG new. The new command will generate all of the boilerplate code that you need to start a brand new Angular project from scratch. You'll go ahead and say ng new with the name of your app, and then there's a number of different options that you can pass in with the command. Let's say you wanna use a CSS extension. You can simply pass in the style flag along with Sass, Less, Stylus, or whatever you wanna use.

And if you wanna take advantage of Angular's router, you can pass in the of routing option, and that will automatically generate the router for you. There's a bunch of other options which you can check out on the documentation on GitHub, but I use these two options very frequently. When you execute this command, it's going to generate a new directory based on the name of your app, then it creates all the files necessary to build and test an Angular app. Now that we've created this directory, we'll go ahead and run code with the name of that directory to open the project up in Versus Code. If you're not using Versus Code, just open up the project in your IDE.

As you can see here, we have all of our files generated and all of our node modules installed. But there's one file that's special when it comes to the CLI, and that's the Angular JSON file. For right now, we don't have to modify anything inside this file, but just know that it exists to control the behavior of the CLI. As you become a more advanced Angular user, you'll be able to do some very powerful things here to build your own libraries, control the build process of your app, and build your own custom schematics for boilerplate code, but we'll cover that stuff in a more advanced video. What we wanna do next is make sure that our app works properly by running ng serve.

Run the command from the command line and add the o flag to have it automatically open up in your browser. The command will compile all of your code with webpack and then spin up a web server so we can view it on local host 42 100. And the cool thing about it is that it will rebuild your code on every change. Let's go into the source code for this app in the app component. And instead of saying welcome to title, we'll say hello, world, title.

When we make our changes, we see them instantly reflected on the app itself. Now that we have a working skeleton app, let's look at how we can generate boilerplate code to build our components, services, pipes, etcetera. When you call generate, you're pointing to a schematic. A schematic can be thought of as a template that has some specific rules that can be followed based on the command line arguments that you pass to it. Every schematic takes a different set of arguments, and we can figure out what those arguments are by running ng generate with the schematic name, in this case, component, and then flag help.

As you can see here, it prints out a bunch of different options that we can pass into the schematic when it generates the code for us. This is an important concept because it's not just generating the files for us, it's also putting them in a specific spot and updating the other files that depend on them. For example, in Angular, we have a concept of modules. So when we generate a component, we need to declare that component in its parent module. So let's look at the most common use case.

We'll run ng generate component and give it a name of cool. You'll notice that it creates 4 different files, but it also updates our existing app module. As you can see here, it added the cool component to the declarations in the g module and also handled the TypeScript import for us. So it eliminates those tedious little things that are necessary for the app to work. Then if we look in the cool directory, you can see it generated our component files that we can use to start writing code immediately without having to do any boilerplate setup.

Once you get comfortable with the CLI, you'll be able to shorten these commands with aliases. For example, you might run ng generate component neat. Then we'll tell it not to generate our testing file, then we'll also give it an inline template and an inline style sheet with the t and s flags. Just like before, it generated the component directory and updated the app module. But this time, it only generated one file because we told it to use an inline template and style sheet, so all of that code is contained directly in the component type script.

That just shows you how the CLI can give you flexibility based on your developer preferences. As an Angular developer, one thing you should be doing is compartmentalizing your code into NG modules. By default, the CLI will import a component that's generated into your root app module. But what if you're trying to generate a component for a feature module? Let's see how we might handle that.

1st, we'll generate a module called awesome. Now let's say we want to add a pipe to this module called lowercase. There are 2 different ways we can handle this. The most straightforward way is to just generate this pipe in the same directory as our awesome module. When doing that, the CLI is smart enough to know to import this pipe in the awesome module and not the root app module like it normally would.

But sometimes your component might be in a different directory. So there's another way to add it to the module, and we can do that by simply running the same command by adding the m flag for module and then point it to the awesome module. This pipe is generated outside of the awesome directory, but it still gets imported properly and declared in the awesome module. So just to reiterate, the generate command is super powerful, and there's a bunch of built in schematics that handle most of the boilerplate cogeneration that you'll need in Angular. And you can even use custom schematics for third party Angular libraries such as n g or x.

So now that we've generated all this code, how are we going to test it? One of the great things about the CLI is that it automatically sets you up for test driven development. All we have to do is run NG test, and it's going to pull up this test runner in the browser, which is powered by Karma and Jasmine. Every time you run the generate command, it creates a spec file that you can use to test the code that you generated. So far, we have 7 specs, and they're all passing except for 1.

If you remember earlier, we changed the title from Welcome to App to Hello World App, and that's causing our specs to fail. Just like NG serve, this will automatically run our specs on every file change. So if we change this back to welcome to, it's going to rerun all the tests, and you see this time, all of them pass. The next thing we're going to look at is an awesome new feature called NG add which was introduced in Angular 6. It allows you to add third party packages, or libraries with 0 configuration.

For example, if we want to make our Angular app a progressive web app, There is normally a bunch of files that we would have to create manually. But now we can just run n g add at angularpwa, and it's going to create all these files for us automatically. In previous videos, I've showed you how to set up PWAs in Angular. But now with ng add, those videos are pretty much obsolete because we can just run this command and it will generate the service worker config file. It will install the dependencies for us, and it will also generate the icons necessary to be a valid PWA.

But n g ad is not limited to just packages created by the Angular team. Any third party library can create its own schematics to automatically added as a dependency to an Angular project. Let's take a look at the NG Bootstrap library. Normally, to install this, we would have to run npm install and then imported into our app module, then called the forRoot method on that module. But with ng add, we can skip this entire process and just handle all these steps with a single command from the CLI.

Run ng add ng bootstrap slash schematics. This installs the package via npm and then also handles the import steps in our app module. Again, this is brand new in Angular 6, so there's not many packages that have this functionality, but we'll definitely see a lot more of this in the coming year. Now the last thing we're going to look at is ng build. Once you finish writing all your code, you'll need a way to package and bundle your app so it can be deployed to a web host.

When you run ng build flag prod, It's going to minify and optimize your code and tree shake away any dead code that would make your bundle size larger than necessary. In other words, it's going to package your app to be as performant as possible for the end user. The final code can be found here in the dist folder, and this is what you would actually deploy to a web host. For example, if you were using something like Firebase, you could just run Firebase deploy and point it to this disk folder. And, again, your entire build process can be customized in the Angular JSON file.

If you look under architect, build, configurations, You'll see one for production with all of the options required for our production build. So those are the core features of the Angular CLI, but let's look at a few other tricks that it has up its sleeve. Let's imagine we have an existing app that's on an older version of Angular and we want to update it. In Angular 6, we now have this ng update command, which will update all of our npm packages to the latest and greatest version of Angular. Or what if we're stuck and we wanna look up something in the documentation.

We can simply run ngdoc with the search term that we wanna search and that will open up the Angular docs so we never have to leave the command line, yet another way that the CLI makes your life a little bit easier. I'm gonna go ahead and wrap things up there. If If this video helped you, please like and subscribe. And if you're serious about building apps with Angular, consider becoming a pro member at angularfirebase.com. You'll get access to exclusive content that you won't find anywhere else designed to help you build and ship your app faster.

Thanks for watching and I'll see you soon.
Today, I'm starting a new video series called The Basics. It will consist of 5 to 10 videos designed to teach you the fundamentals of Angular 6. To kick things off, we're going to start with one of the most powerful features of Angular, which is the CLI. A ton of new features were added to the CLI in version 6, and my goal is to show you how to use it effectively to dramatically speed up the development time of your app.
animation
video gaming
youtube
software development
If you're new to the channel, make sure to like and subscribe and grab the full source code from Angular Firebase of COM. So the main goal of Angular's command line interface is to automate things that you would otherwise have to do manually, and it does a really good job of that compared to what other web frameworks offer. The reason I chose it as the topic for this first basics video though, is because you really need to know how to use the CLI before you can use Angular effectively. To get started, you wanna bring up a command line terminal, which I'm doing here in Versus Code, then run npm install angular cli flag global. That should install version 6.0 or greater on in your system, giving you access to the ng command. You can verify the install by running ng flag v, which will print out some information about your local development environment. Then the first command that you'll run is NG new. The new command will generate all of the boilerplate code that you need to start a brand new Angular project from scratch. You'll go ahead and say ng new with the name of your app, and then there's a number of different options that you can pass in with the command. Let's say you wanna use a CSS extension. You can simply pass in the style flag along with Sass, Less, Stylus, or whatever you wanna use. And if you wanna take advantage of Angular's router, you can pass in the of routing option, and that will automatically generate the router for you. There's a bunch of other options which you can check out on the documentation on GitHub, but I use these two options very frequently. When you execute this command, it's going to generate a new directory based on the name of your app, then it creates all the files necessary to build and test an Angular app.
Now that we've created this directory, we'll go ahead and run code with the name of that directory to open the project up in Versus Code. If you're not using Versus Code, just open up the project in your IDE. As you can see here, we have all of our files generated and all of our node modules installed. But there's one file that's special when it comes to the CLI, and that's the Angular JSON file.
software development
For right now, we don't have to modify anything inside this file, but just know that it exists to control the behavior of the CLI.
As you become a more advanced Angular user, you'll be able to do some very powerful things here to build your own libraries, control the build process of your app, and build your own custom schematics for boilerplate code, but we'll cover that stuff in a more advanced video. What we wanna do next is make sure that our app works properly by running ng serve.
software development
software
Run the command from the command line and add the o flag to have it automatically open up in your browser.
The command will compile all of your code with webpack and then spin up a web server so we can view it on local host 42 100. And the cool thing about it is that it will rebuild your code on every change. Let's go into the source code for this app in the app component. And instead of saying welcome to title, we'll say hello, world, title. When we make our changes, we see them instantly reflected on the app itself. Now that we have a working skeleton app, let's look at how we can generate boilerplate code to build our components, services, pipes, etcetera. When you call generate, you're pointing to a schematic. A schematic can be thought of as a template that has some specific rules that can be followed based on the command line arguments that you pass to it.
modeling
software
software development
programming
Every schematic takes a different set of arguments, and we can figure out what those arguments are by running ng generate with the schematic name, in this case, component, and then flag help.
As you can see here, it prints out a bunch of different options that we can pass into the schematic when it generates the code for us. This is an important concept because it's not just generating the files for us, it's also putting them in a specific spot and updating the other files that depend on them.
programming
For example, in Angular, we have a concept of modules. So when we generate a component, we need to declare that component in its parent module.
So let's look at the most common use case. We'll run ng generate component and give it a name of cool. You'll notice that it creates 4 different files, but it also updates our existing app module. As you can see here, it added the cool component to the declarations in the g module and also handled the TypeScript import for us. So it eliminates those tedious little things that are necessary for the app to work. Then if we look in the cool directory, you can see it generated our component files that we can use to start writing code immediately without having to do any boilerplate setup. Once you get comfortable with the CLI, you'll be able to shorten these commands with aliases.
software development
programming
software
For example, you might run ng generate component neat.
Then we'll tell it not to generate our testing file, then we'll also give it an inline template and an inline style sheet with the t and s flags. Just like before, it generated the component directory and updated the app module. But this time, it only generated one file because we told it to use an inline template and style sheet, so all of that code is contained directly in the component type script. That just shows you how the CLI can give you flexibility based on your developer preferences.
software development
programming
software
As an Angular developer, one thing you should be doing is compartmentalizing your code into NG modules.
By default, the CLI will import a component that's generated into your root app module. But what if you're trying to generate a component for a feature module? Let's see how we might handle that. 1st, we'll generate a module called awesome. Now let's say we want to add a pipe to this module called lowercase.
software development
There are 2 different ways we can handle this. The most straightforward way is to just generate this pipe in the same directory as our awesome module. When doing that, the CLI is smart enough to know to import this pipe in the awesome module and not the root app module like it normally would. But sometimes your component might be in a different directory. So there's another way to add it to the module, and we can do that by simply running the same command by adding the m flag for module and then point it to the awesome module.
This pipe is generated outside of the awesome directory, but it still gets imported properly and declared in the awesome module. So just to reiterate, the generate command is super powerful, and there's a bunch of built in schematics that handle most of the boilerplate cogeneration that you'll need in Angular. And you can even use custom schematics for third party Angular libraries such as n g or x. So now that we've generated all this code, how are we going to test it? One of the great things about the CLI is that it automatically sets you up for test driven development. All we have to do is run NG test, and it's going to pull up this test runner in the browser, which is powered by Karma and Jasmine. Every time you run the generate command, it creates a spec file that you can use to test the code that you generated.
software development
programming
software
So far, we have 7 specs, and they're all passing except for 1. If you remember earlier, we changed the title from Welcome to App to Hello World App, and that's causing our specs to fail. Just like NG serve, this will automatically run our specs on every file change. So if we change this back to welcome to, it's going to rerun all the tests, and you see this time, all of them pass. The next thing we're going to look at is an awesome new feature called NG add which was introduced in Angular 6. It allows you to add third party packages, or libraries with 0 configuration.
For example, if we want to make our Angular app a progressive web app, There is normally a bunch of files that we would have to create manually. But now we can just run n g add at angularpwa, and it's going to create all these files for us automatically.
software development
In previous videos, I've showed you how to set up PWAs in Angular.
But now with ng add, those videos are pretty much obsolete because we can just run this command and it will generate the service worker config file. It will install the dependencies for us, and it will also generate the icons necessary to be a valid PWA. But n g ad is not limited to just packages created by the Angular team. Any third party library can create its own schematics to automatically added as a dependency to an Angular project.
software development
youtube
video gaming
Let's take a look at the NG Bootstrap library. Normally, to install this, we would have to run npm install and then imported into our app module, then called the forRoot method on that module. But with ng add, we can skip this entire process and just handle all these steps with a single command from the CLI. Run ng add ng bootstrap slash schematics. This installs the package via npm and then also handles the import steps in our app module. Again, this is brand new in Angular 6, so there's not many packages that have this functionality, but we'll definitely see a lot more of this in the coming year. Now the last thing we're going to look at is ng build. Once you finish writing all your code, you'll need a way to package and bundle your app so it can be deployed to a web host. When you run ng build flag prod, It's going to minify and optimize your code and tree shake away any dead code that would make your bundle size larger than necessary.
In other words, it's going to package your app to be as performant as possible for the end user. The final code can be found here in the dist folder, and this is what you would actually deploy to a web host. For example, if you were using something like Firebase, you could just run Firebase deploy and point it to this disk folder.
software
And, again, your entire build process can be customized in the Angular JSON file.
If you look under architect, build, configurations, You'll see one for production with all of the options required for our production build. So those are the core features of the Angular CLI, but let's look at a few other tricks that it has up its sleeve. Let's imagine we have an existing app that's on an older version of Angular and we want to update it.
graphic design
In Angular 6, we now have this ng update command, which will update all of our npm packages to the latest and greatest version of Angular. Or what if we're stuck and we wanna look up something in the documentation. We can simply run ngdoc with the search term that we wanna search and that will open up the Angular docs so we never have to leave the command line, yet another way that the CLI makes your life a little bit easier.
I'm gonna go ahead and wrap things up there. If If this video helped you, please like and subscribe. And if you're serious about building apps with Angular, consider becoming a pro member at angularfirebase.com. You'll get access to exclusive content that you won't find anywhere else designed to help you build and ship your app faster. Thanks for watching and I'll see you soon.
youtube
streaming
microsoft
google
software
internet
Today, I'm starting a new video series called The Basics. It will consist of 5 to 10 videos designed to teach you the fundamentals of Angular 6. To kick things off, we're going to start with one of the most powerful features of Angular, which is the CLI. A ton of new features were added to the CLI in version 6, and my goal is to show you how to use it effectively to dramatically speed up the development time of your app. If you're new to the channel, make sure to like and subscribe and grab the full source code from Angular Firebase of COM. So the main goal of Angular's command line interface is to automate things that you would otherwise have to do manually, and it does a really good job of that compared to what other web frameworks offer. The reason I chose it as the topic for this first basics video though, is because you really need to know how to use the CLI before you can use Angular effectively. To get started, you wanna bring up a command line terminal, which I'm doing here in Versus Code, then run npm install angular cli flag global. That should install version 6.0 or greater on in your system, giving you access to the ng command. You can verify the install by running ng flag v, which will print out some information about your local development environment. Then the first command that you'll run is NG new. The new command will generate all of the boilerplate code that you need to start a brand new Angular project from scratch. You'll go ahead and say ng new with the name of your app, and then there's a number of different options that you can pass in with the command. Let's say you wanna use a CSS extension. You can simply pass in the style flag along with Sass, Less, Stylus, or whatever you wanna use. And if you wanna take advantage of Angular's router, you can pass in the of routing option, and that will automatically generate the router for you. There's a bunch of other options which you can check out on the documentation on GitHub, but I use these two options very frequently. When you execute this command, it's going to generate a new directory based on the name of your app, then it creates all the files necessary to build and test an Angular app. Now that we've created this directory, we'll go ahead and run code with the name of that directory to open the project up in Versus Code. If you're not using Versus Code, just open up the project in your IDE. As you can see here, we have all of our files generated and all of our node modules installed. But there's one file that's special when it comes to the CLI, and that's the Angular JSON file. For right now, we don't have to modify anything inside this file, but just know that it exists to control the behavior of the CLI. As you become a more advanced Angular user, you'll be able to do some very powerful things here to build your own libraries, control the build process of your app, and build your own custom schematics for boilerplate code, but we'll cover that stuff in a more advanced video. What we wanna do next is make sure that our app works properly by running ng serve. Run the command from the command line and add the o flag to have it automatically open up in your browser. The command will compile all of your code with webpack and then spin up a web server so we can view it on local host 42 100. And the cool thing about it is that it will rebuild your code on every change. Let's go into the source code for this app in the app component. And instead of saying welcome to title, we'll say hello, world, title. When we make our changes, we see them instantly reflected on the app itself. Now that we have a working skeleton app, let's look at how we can generate boilerplate code to build our components, services, pipes, etcetera. When you call generate, you're pointing to a schematic. A schematic can be thought of as a template that has some specific rules that can be followed based on the command line arguments that you pass to it. Every schematic takes a different set of arguments, and we can figure out what those arguments are by running ng generate with the schematic name, in this case, component, and then flag help. As you can see here, it prints out a bunch of different options that we can pass into the schematic when it generates the code for us. This is an important concept because it's not just generating the files for us, it's also putting them in a specific spot and updating the other files that depend on them. For example, in Angular, we have a concept of modules. So when we generate a component, we need to declare that component in its parent module. So let's look at the most common use case. We'll run ng generate component and give it a name of cool. You'll notice that it creates 4 different files, but it also updates our existing app module. As you can see here, it added the cool component to the declarations in the g module and also handled the TypeScript import for us. So it eliminates those tedious little things that are necessary for the app to work. Then if we look in the cool directory, you can see it generated our component files that we can use to start writing code immediately without having to do any boilerplate setup. Once you get comfortable with the CLI, you'll be able to shorten these commands with aliases. For example, you might run ng generate component neat. Then we'll tell it not to generate our testing file, then we'll also give it an inline template and an inline style sheet with the t and s flags. Just like before, it generated the component directory and updated the app module. But this time, it only generated one file because we told it to use an inline template and style sheet, so all of that code is contained directly in the component type script. That just shows you how the CLI can give you flexibility based on your developer preferences. As an Angular developer, one thing you should be doing is compartmentalizing your code into NG modules. By default, the CLI will import a component that's generated into your root app module. But what if you're trying to generate a component for a feature module? Let's see how we might handle that. 1st, we'll generate a module called awesome. Now let's say we want to add a pipe to this module called lowercase. There are 2 different ways we can handle this. The most straightforward way is to just generate this pipe in the same directory as our awesome module. When doing that, the CLI is smart enough to know to import this pipe in the awesome module and not the root app module like it normally would. But sometimes your component might be in a different directory. So there's another way to add it to the module, and we can do that by simply running the same command by adding the m flag for module and then point it to the awesome module. This pipe is generated outside of the awesome directory, but it still gets imported properly and declared in the awesome module. So just to reiterate, the generate command is super powerful, and there's a bunch of built in schematics that handle most of the boilerplate cogeneration that you'll need in Angular. And you can even use custom schematics for third party Angular libraries such as n g or x. So now that we've generated all this code, how are we going to test it? One of the great things about the CLI is that it automatically sets you up for test driven development. All we have to do is run NG test, and it's going to pull up this test runner in the browser, which is powered by Karma and Jasmine. Every time you run the generate command, it creates a spec file that you can use to test the code that you generated. So far, we have 7 specs, and they're all passing except for 1. If you remember earlier, we changed the title from Welcome to App to Hello World App, and that's causing our specs to fail. Just like NG serve, this will automatically run our specs on every file change. So if we change this back to welcome to, it's going to rerun all the tests, and you see this time, all of them pass. The next thing we're going to look at is an awesome new feature called NG add which was introduced in Angular 6. It allows you to add third party packages, or libraries with 0 configuration. For example, if we want to make our Angular app a progressive web app, There is normally a bunch of files that we would have to create manually. But now we can just run n g add at angularpwa, and it's going to create all these files for us automatically. In previous videos, I've showed you how to set up PWAs in Angular. But now with ng add, those videos are pretty much obsolete because we can just run this command and it will generate the service worker config file. It will install the dependencies for us, and it will also generate the icons necessary to be a valid PWA. But n g ad is not limited to just packages created by the Angular team. Any third party library can create its own schematics to automatically added as a dependency to an Angular project. Let's take a look at the NG Bootstrap library. Normally, to install this, we would have to run npm install and then imported into our app module, then called the forRoot method on that module. But with ng add, we can skip this entire process and just handle all these steps with a single command from the CLI. Run ng add ng bootstrap slash schematics. This installs the package via npm and then also handles the import steps in our app module. Again, this is brand new in Angular 6, so there's not many packages that have this functionality, but we'll definitely see a lot more of this in the coming year. Now the last thing we're going to look at is ng build. Once you finish writing all your code, you'll need a way to package and bundle your app so it can be deployed to a web host. When you run ng build flag prod, It's going to minify and optimize your code and tree shake away any dead code that would make your bundle size larger than necessary. In other words, it's going to package your app to be as performant as possible for the end user. The final code can be found here in the dist folder, and this is what you would actually deploy to a web host. For example, if you were using something like Firebase, you could just run Firebase deploy and point it to this disk folder. And, again, your entire build process can be customized in the Angular JSON file. If you look under architect, build, configurations, You'll see one for production with all of the options required for our production build. So those are the core features of the Angular CLI, but let's look at a few other tricks that it has up its sleeve. Let's imagine we have an existing app that's on an older version of Angular and we want to update it. In Angular 6, we now have this ng update command, which will update all of our npm packages to the latest and greatest version of Angular. Or what if we're stuck and we wanna look up something in the documentation. We can simply run ngdoc with the search term that we wanna search and that will open up the Angular docs so we never have to leave the command line, yet another way that the CLI makes your life a little bit easier. I'm gonna go ahead and wrap things up there. If If this video helped you, please like and subscribe. And if you're serious about building apps with Angular, consider becoming a pro member at angularfirebase.com. You'll get access to exclusive content that you won't find anywhere else designed to help you build and ship your app faster. Thanks for watching and I'll see you soon.
Today,
today
I'm
i'm
starting
starting
a
a
new
new
video
video
series
series
called
called
The
the
Basics.
basics
It
it
will
will
consist
consist
of
of
5
5
to
to
10
10
videos
videos
designed
designed
to
to
teach
teach
you
you
the
the
fundamentals
fundamentals
of
of
Angular
angular
6.
6
To
to
kick
kick
things
things
off,
off
we're
we're
going
going
to
to
start
start
with
with
one
one
of
of
the
the
most
most
powerful
powerful
features
features
of
of
Angular,
angular
which
which
is
is
the
the
CLI.
cli
A
a
ton
ton
of
of
new
new
features
features
were
were
added
added
to
to
the
the
CLI
cli
in
in
version
version
6,
6
and
and
my
my
goal
goal
is
is
to
to
show
show
you
you
how
how
to
to
use
use
it
it
effectively
effectively
to
to
dramatically
dramatically
speed
speed
up
up
the
the
development
development
time
time
of
of
your
your
app.
app
If
if
you're
you're
new
new
to
to
the
the
channel,
channel
make
make
sure
sure
to
to
like
like
and
and
subscribe
subscribe
and
and
grab
grab
the
the
full
full
source
source
code
code
from
from
Angular
angular
Firebase
firebase
of
of
COM.
com
So
so
the
the
main
main
goal
goal
of
of
Angular's
angular's
command
command
line
line
interface
interface
is
is
to
to
automate
automate
things
things
that
that
you
you
would
would
otherwise
otherwise
have
have
to
to
do
do
manually,
manually
and
and
it
it
does
does
a
a
really
really
good
good
job
job
of
of
that
that
compared
compared
to
to
what
what
other
other
web
web
frameworks
frameworks
offer.
offer
The
the
reason
reason
I
i
chose
chose
it
it
as
as
the
the
topic
topic
for
for
this
this
first
first
basics
basics
video
video
though,
though
is
is
because
because
you
you
really
really
need
need
to
to
know
know
how
how
to
to
use
use
the
the
CLI
cli
before
before
you
you
can
can
use
use
Angular
angular
effectively.
effectively
To
to
get
get
started,
started
you
you
wanna
wanna
bring
bring
up
up
a
a
command
command
line
line
terminal,
terminal
which
which
I'm
i'm
doing
doing
here
here
in
in
Versus
versus
Code,
code
then
then
run
run
npm
npm
install
install
angular
angular
cli
cli
flag
flag
global.
global
That
that
should
should
install
install
version
version
6.0
6.0
or
or
greater
greater
on
on
in
in
your
your
system,
system
giving
giving
you
you
access
access
to
to
the
the
ng
ng
command.
command
You
you
can
can
verify
verify
the
the
install
install
by
by
running
running
ng
ng
flag
flag
v,
v
which
which
will
will
print
print
out
out
some
some
information
information
about
about
your
your
local
local
development
development
environment.
environment
Then
then
the
the
first
first
command
command
that
that
you'll
you'll
run
run
is
is
NG
ng
new.
new
The
the
new
new
command
command
will
will
generate
generate
all
all
of
of
the
the
boilerplate
boilerplate
code
code
that
that
you
you
need
need
to
to
start
start
a
a
brand
brand
new
new
Angular
angular
project
project
from
from
scratch.
scratch
You'll
you'll
go
go
ahead
ahead
and
and
say
say
ng
ng
new
new
with
with
the
the
name
name
of
of
your
your
app,
app
and
and
then
then
there's
there's
a
a
number
number
of
of
different
different
options
options
that
that
you
you
can
can
pass
pass
in
in
with
with
the
the
command.
command
Let's
let's
say
say
you
you
wanna
wanna
use
use
a
a
CSS
css
extension.
extension
You
you
can
can
simply
simply
pass
pass
in
in
the
the
style
style
flag
flag
along
along
with
with
Sass,
sass
Less,
less
Stylus,
stylus
or
or
whatever
whatever
you
you
wanna
wanna
use.
use
And
and
if
if
you
you
wanna
wanna
take
take
advantage
advantage
of
of
Angular's
angular's
router,
router
you
you
can
can
pass
pass
in
in
the
the
of
of
routing
routing
option,
option
and
and
that
that
will
will
automatically
automatically
generate
generate
the
the
router
router
for
for
you.
you
There's
there's
a
a
bunch
bunch
of
of
other
other
options
options
which
which
you
you
can
can
check
check
out
out
on
on
the
the
documentation
documentation
on
on
GitHub,
github
but
but
I
i
use
use
these
these
two
two
options
options
very
very
frequently.
frequently
When
when
you
you
execute
execute
this
this
command,
command
it's
it's
going
going
to
to
generate
generate
a
a
new
new
directory
directory
based
based
on
on
the
the
name
name
of
of
your
your
app,
app
then
then
it
it
creates
creates
all
all
the
the
files
files
necessary
necessary
to
to
build
build
and
and
test
test
an
an
Angular
angular
app.
app
Now
now
that
that
we've
we've
created
created
this
this
directory,
directory
we'll
we'll
go
go
ahead
ahead
and
and
run
run
code
code
with
with
the
the
name
name
of
of
that
that
directory
directory
to
to
open
open
the
the
project
project
up
up
in
in
Versus
versus
Code.
code
If
if
you're
you're
not
not
using
using
Versus
versus
Code,
code
just
just
open
open
up
up
the
the
project
project
in
in
your
your
IDE.
ide
As
as
you
you
can
can
see
see
here,
here
we
we
have
have
all
all
of
of
our
our
files
files
generated
generated
and
and
all
all
of
of
our
our
node
node
modules
modules
installed.
installed
But
but
there's
there's
one
one
file
file
that's
that's
special
special
when
when
it
it
comes
comes
to
to
the
the
CLI,
cli
and
and
that's
that's
the
the
Angular
angular
JSON
json
file.
file
For
for
right
right
now,
now
we
we
don't
don't
have
have
to
to
modify
modify
anything
anything
inside
inside
this
this
file,
file
but
but
just
just
know
know
that
that
it
it
exists
exists
to
to
control
control
the
the
behavior
behavior
of
of
the
the
CLI.
cli
As
as
you
you
become
become
a
a
more
more
advanced
advanced
Angular
angular
user,
user
you'll
you'll
be
be
able
able
to
to
do
do
some
some
very
very
powerful
powerful
things
things
here
here
to
to
build
build
your
your
own
own
libraries,
libraries
control
control
the
the
build
build
process
process
of
of
your
your
app,
app
and
and
build
build
your
your
own
own
custom
custom
schematics
schematics
for
for
boilerplate
boilerplate
code,
code
but
but
we'll
we'll
cover
cover
that
that
stuff
stuff
in
in
a
a
more
more
advanced
advanced
video.
video
What
what
we
we
wanna
wanna
do
do
next
next
is
is
make
make
sure
sure
that
that
our
our
app
app
works
works
properly
properly
by
by
running
running
ng
ng
serve.
serve
Run
run
the
the
command
command
from
from
the
the
command
command
line
line
and
and
add
add
the
the
o
o
flag
flag
to
to
have
have
it
it
automatically
automatically
open
open
up
up
in
in
your
your
browser.
browser
The
the
command
command
will
will
compile
compile
all
all
of
of
your
your
code
code
with
with
webpack
webpack
and
and
then
then
spin
spin
up
up
a
a
web
web
server
server
so
so
we
we
can
can
view
view
it
it
on
on
local
local
host
host
42
42
100.
100
And
and
the
the
cool
cool
thing
thing
about
about
it
it
is
is
that
that
it
it
will
will
rebuild
rebuild
your
your
code
code
on
on
every
every
change.
change
Let's
let's
go
go
into
into
the
the
source
source
code
code
for
for
this
this
app
app
in
in
the
the
app
app
component.
component
And
and
instead
instead
of
of
saying
saying
welcome
welcome
to
to
title,
title
we'll
we'll
say
say
hello,
hello
world,
world
title.
title
When
when
we
we
make
make
our
our
changes,
changes
we
we
see
see
them
them
instantly
instantly
reflected
reflected
on
on
the
the
app
app
itself.
itself
Now
now
that
that
we
we
have
have
a
a
working
working
skeleton
skeleton
app,
app
let's
let's
look
look
at
at
how
how
we
we
can
can
generate
generate
boilerplate
boilerplate
code
code
to
to
build
build
our
our
components,
components
services,
services
pipes,
pipes
etcetera.
etcetera
When
when
you
you
call
call
generate,
generate
you're
you're
pointing
pointing
to
to
a
a
schematic.
schematic
A
a
schematic
schematic
can
can
be
be
thought
thought
of
of
as
as
a
a
template
template
that
that
has
has
some
some
specific
specific
rules
rules
that
that
can
can
be
be
followed
followed
based
based
on
on
the
the
command
command
line
line
arguments
arguments
that
that
you
you
pass
pass
to
to
it.
it
Every
every
schematic
schematic
takes
takes
a
a
different
different
set
set
of
of
arguments,
arguments
and
and
we
we
can
can
figure
figure
out
out
what
what
those
those
arguments
arguments
are
are
by
by
running
running
ng
ng
generate
generate
with
with
the
the
schematic
schematic
name,
name
in
in
this
this
case,
case
component,
component
and
and
then
then
flag
flag
help.
help
As
as
you
you
can
can
see
see
here,
here
it
it
prints
prints
out
out
a
a
bunch
bunch
of
of
different
different
options
options
that
that
we
we
can
can
pass
pass
into
into
the
the
schematic
schematic
when
when
it
it
generates
generates
the
the
code
code
for
for
us.
us
This
this
is
is
an
an
important
important
concept
concept
because
because
it's
it's
not
not
just
just
generating
generating
the
the
files
files
for
for
us,
us
it's
it's
also
also
putting
putting
them
them
in
in
a
a
specific
specific
spot
spot
and
and
updating
updating
the
the
other
other
files
files
that
that
depend
depend
on
on
them.
them
For
for
example,
example
in
in
Angular,
angular
we
we
have
have
a
a
concept
concept
of
of
modules.
modules
So
so
when
when
we
we
generate
generate
a
a
component,
component
we
we
need
need
to
to
declare
declare
that
that
component
component
in
in
its
its
parent
parent
module.
module
So
so
let's
let's
look
look
at
at
the
the
most
most
common
common
use
use
case.
case
We'll
we'll
run
run
ng
ng
generate
generate
component
component
and
and
give
give
it
it
a
a
name
name
of
of
cool.
cool
You'll
you'll
notice
notice
that
that
it
it
creates
creates
4
4
different
different
files,
files
but
but
it
it
also
also
updates
updates
our
our
existing
existing
app
app
module.
module
As
as
you
you
can
can
see
see
here,
here
it
it
added
added
the
the
cool
cool
component
component
to
to
the
the
declarations
declarations
in
in
the
the
g
g
module
module
and
and
also
also
handled
handled
the
the
TypeScript
typescript
import
import
for
for
us.
us
So
so
it
it
eliminates
eliminates
those
those
tedious
tedious
little
little
things
things
that
that
are
are
necessary
necessary
for
for
the
the
app
app
to
to
work.
work
Then
then
if
if
we
we
look
look
in
in
the
the
cool
cool
directory,
directory
you
you
can
can
see
see
it
it
generated
generated
our
our
component
component
files
files
that
that
we
we
can
can
use
use
to
to
start
start
writing
writing
code
code
immediately
immediately
without
without
having
having
to
to
do
do
any
any
boilerplate
boilerplate
setup.
setup
Once
once
you
you
get
get
comfortable
comfortable
with
with
the
the
CLI,
cli
you'll
you'll
be
be
able
able
to
to
shorten
shorten
these
these
commands
commands
with
with
aliases.
aliases
For
for
example,
example
you
you
might
might
run
run
ng
ng
generate
generate
component
component
neat.
neat
Then
then
we'll
we'll
tell
tell
it
it
not
not
to
to
generate
generate
our
our
testing
testing
file,
file
then
then
we'll
we'll
also
also
give
give
it
it
an
an
inline
inline
template
template
and
and
an
an
inline
inline
style
style
sheet
sheet
with
with
the
the
t
t
and
and
s
s
flags.
flags
Just
just
like
like
before,
before
it
it
generated
generated
the
the
component
component
directory
directory
and
and
updated
updated
the
the
app
app
module.
module
But
but
this
this
time,
time
it
it
only
only
generated
generated
one
one
file
file
because
because
we
we
told
told
it
it
to
to
use
use
an
an
inline
inline
template
template
and
and
style
style
sheet,
sheet
so
so
all
all
of
of
that
that
code
code
is
is
contained
contained
directly
directly
in
in
the
the
component
component
type
type
script.
script
That
that
just
just
shows
shows
you
you
how
how
the
the
CLI
cli
can
can
give
give
you
you
flexibility
flexibility
based
based
on
on
your
your
developer
developer
preferences.
preferences
As
as
an
an
Angular
angular
developer,
developer
one
one
thing
thing
you
you
should
should
be
be
doing
doing
is
is
compartmentalizing
compartmentalizing
your
your
code
code
into
into
NG
ng
modules.
modules
By
by
default,
default
the
the
CLI
cli
will
will
import
import
a
a
component
component
that's
that's
generated
generated
into
into
your
your
root
root
app
app
module.
module
But
but
what
what
if
if
you're
you're
trying
trying
to
to
generate
generate
a
a
component
component
for
for
a
a
feature
feature
module?
module
Let's
let's
see
see
how
how
we
we
might
might
handle
handle
that.
that
1st,
1st
we'll
we'll
generate
generate
a
a
module
module
called
called
awesome.
awesome
Now
now
let's
let's
say
say
we
we
want
want
to
to
add
add
a
a
pipe
pipe
to
to
this
this
module
module
called
called
lowercase.
lowercase
There
there
are
are
2
2
different
different
ways
ways
we
we
can
can
handle
handle
this.
this
The
the
most
most
straightforward
straightforward
way
way
is
is
to
to
just
just
generate
generate
this
this
pipe
pipe
in
in
the
the
same
same
directory
directory
as
as
our
our
awesome
awesome
module.
module
When
when
doing
doing
that,
that
the
the
CLI
cli
is
is
smart
smart
enough
enough
to
to
know
know
to
to
import
import
this
this
pipe
pipe
in
in
the
the
awesome
awesome
module
module
and
and
not
not
the
the
root
root
app
app
module
module
like
like
it
it
normally
normally
would.
would
But
but
sometimes
sometimes
your
your
component
component
might
might
be
be
in
in
a
a
different
different
directory.
directory
So
so
there's
there's
another
another
way
way
to
to
add
add
it
it
to
to
the
the
module,
module
and
and
we
we
can
can
do
do
that
that
by
by
simply
simply
running
running
the
the
same
same
command
command
by
by
adding
adding
the
the
m
m
flag
flag
for
for
module
module
and
and
then
then
point
point
it
it
to
to
the
the
awesome
awesome
module.
module
This
this
pipe
pipe
is
is
generated
generated
outside
outside
of
of
the
the
awesome
awesome
directory,
directory
but
but
it
it
still
still
gets
gets
imported
imported
properly
properly
and
and
declared
declared
in
in
the
the
awesome
awesome
module.
module
So
so
just
just
to
to
reiterate,
reiterate
the
the
generate
generate
command
command
is
is
super
super
powerful,
powerful
and
and
there's
there's
a
a
bunch
bunch
of
of
built
built
in
in
schematics
schematics
that
that
handle
handle
most
most
of
of
the
the
boilerplate
boilerplate
cogeneration
cogeneration
that
that
you'll
you'll
need
need
in
in
Angular.
angular
And
and
you
you
can
can
even
even
use
use
custom
custom
schematics
schematics
for
for
third
third
party
party
Angular
angular
libraries
libraries
such
such
as
as
n
n
g
g
or
or
x.
x
So
so
now
now
that
that
we've
we've
generated
generated
all
all
this
this
code,
code
how
how
are
are
we
we
going
going
to
to
test
test
it?
it
One
one
of
of
the
the
great
great
things
things
about
about
the
the
CLI
cli
is
is
that
that
it
it
automatically
automatically
sets
sets
you
you
up
up
for
for
test
test
driven
driven
development.
development
All
all
we
we
have
have
to
to
do
do
is
is
run
run
NG
ng
test,
test
and
and
it's
it's
going
going
to
to
pull
pull
up
up
this
this
test
test
runner
runner
in
in
the
the
browser,
browser
which
which
is
is
powered
powered
by
by
Karma
karma
and
and
Jasmine.
jasmine
Every
every
time
time
you
you
run
run
the
the
generate
generate
command,
command
it
it
creates
creates
a
a
spec
spec
file
file
that
that
you
you
can
can
use
use
to
to
test
test
the
the
code
code
that
that
you
you
generated.
generated
So
so
far,
far
we
we
have
have
7
7
specs,
specs
and
and
they're
they're
all
all
passing
passing
except
except
for
for
1.
1
If
if
you
you
remember
remember
earlier,
earlier
we
we
changed
changed
the
the
title
title
from
from
Welcome
welcome
to
to
App
app
to
to
Hello
hello
World
world
App,
app
and
and
that's
that's
causing
causing
our
our
specs
specs
to
to
fail.
fail
Just
just
like
like
NG
ng
serve,
serve
this
this
will
will
automatically
automatically
run
run
our
our
specs
specs
on
on
every
every
file
file
change.
change
So
so
if
if
we
we
change
change
this
this
back
back
to
to
welcome
welcome
to,
to
it's
it's
going
going
to
to
rerun
rerun
all
all
the
the
tests,
tests
and
and
you
you
see
see
this
this
time,
time
all
all
of
of
them
them
pass.
pass
The
the
next
next
thing
thing
we're
we're
going
going
to
to
look
look
at
at
is
is
an
an
awesome
awesome
new
new
feature
feature
called
called
NG
ng
add
add
which
which
was
was
introduced
introduced
in
in
Angular
angular
6.
6
It
it
allows
allows
you
you
to
to
add
add
third
third
party
party
packages,
packages
or
or
libraries
libraries
with
with
0
0
configuration.
configuration
For
for
example,
example
if
if
we
we
want
want
to
to
make
make
our
our
Angular
angular
app
app
a
a
progressive
progressive
web
web
app,
app
There
there
is
is
normally
normally
a
a
bunch
bunch
of
of
files
files
that
that
we
we
would
would
have
have
to
to
create
create
manually.
manually
But
but
now
now
we
we
can
can
just
just
run
run
n
n
g
g
add
add
at
at
angularpwa,
angularpwa
and
and
it's
it's
going
going
to
to
create
create
all
all
these
these
files
files
for
for
us
us
automatically.
automatically
In
in
previous
previous
videos,
videos
I've
i've
showed
showed
you
you
how
how
to
to
set
set
up
up
PWAs
pwas
in
in
Angular.
angular
But
but
now
now
with
with
ng
ng
add,
add
those
those
videos
videos
are
are
pretty
pretty
much
much
obsolete
obsolete
because
because
we
we
can
can
just
just
run
run
this
this
command
command
and
and
it
it
will
will
generate
generate
the
the
service
service
worker
worker
config
config
file.
file
It
it
will
will
install
install
the
the
dependencies
dependencies
for
for
us,
us
and
and
it
it
will
will
also
also
generate
generate
the
the
icons
icons
necessary
necessary
to
to
be
be
a
a
valid
valid
PWA.
pwa
But
but
n
n
g
g
ad
ad
is
is
not
not
limited
limited
to
to
just
just
packages
packages
created
created
by
by
the
the
Angular
angular
team.
team
Any
any
third
third
party
party
library
library
can
can
create
create
its
its
own
own
schematics
schematics
to
to
automatically
automatically
added
added
as
as
a
a
dependency
dependency
to
to
an
an
Angular
angular
project.
project
Let's
let's
take
take
a
a
look
look
at
at
the
the
NG
ng
Bootstrap
bootstrap
library.
library
Normally,
normally
to
to
install
install
this,
this
we
we
would
would
have
have
to
to
run
run
npm
npm
install
install
and
and
then
then
imported
imported
into
into
our
our
app
app
module,
module
then
then
called
called
the
the
forRoot
forroot
method
method
on
on
that
that
module.
module
But
but
with
with
ng
ng
add,
add
we
we
can
can
skip
skip
this
this
entire
entire
process
process
and
and
just
just
handle
handle
all
all
these
these
steps
steps
with
with
a
a
single
single
command
command
from
from
the
the
CLI.
cli
Run
run
ng
ng
add
add
ng
ng
bootstrap
bootstrap
slash
slash
schematics.
schematics
This
this
installs
installs
the
the
package
package
via
via
npm
npm
and
and
then
then
also
also
handles
handles
the
the
import
import
steps
steps
in
in
our
our
app
app
module.
module
Again,
again
this
this
is
is
brand
brand
new
new
in
in
Angular
angular
6,
6
so
so
there's
there's
not
not
many
many
packages
packages
that
that
have
have
this
this
functionality,
functionality
but
but
we'll
we'll
definitely
definitely
see
see
a
a
lot
lot
more
more
of
of
this
this
in
in
the
the
coming
coming
year.
year
Now
now
the
the
last
last
thing
thing
we're
we're
going
going
to
to
look
look
at
at
is
is
ng
ng
build.
build
Once
once
you
you
finish
finish
writing
writing
all
all
your
your
code,
code
you'll
you'll
need
need
a
a
way
way
to
to
package
package
and
and
bundle
bundle
your
your
app
app
so
so
it
it
can
can
be
be
deployed
deployed
to
to
a
a
web
web
host.
host
When
when
you
you
run
run
ng
ng
build
build
flag
flag
prod,
prod
It's
it's
going
going
to
to
minify
minify
and
and
optimize
optimize
your
your
code
code
and
and
tree
tree
shake
shake
away
away
any
any
dead
dead
code
code
that
that
would
would
make
make
your
your
bundle
bundle
size
size
larger
larger
than
than
necessary.
necessary
In
in
other
other
words,
words
it's
it's
going
going
to
to
package
package
your
your
app
app
to
to
be
be
as
as
performant
performant
as
as
possible
possible
for
for
the
the
end
end
user.
user
The
the
final
final
code
code
can
can
be
be
found
found
here
here
in
in
the
the
dist
dist
folder,
folder
and
and
this
this
is
is
what
what
you
you
would
would
actually
actually
deploy
deploy
to
to
a
a
web
web
host.
host
For
for
example,
example
if
if
you
you
were
were
using
using
something
something
like
like
Firebase,
firebase
you
you
could
could
just
just
run
run
Firebase
firebase
deploy
deploy
and
and
point
point
it
it
to
to
this
this
disk
disk
folder.
folder
And,
and
again,
again
your
your
entire
entire
build
build
process
process
can
can
be
be
customized
customized
in
in
the
the
Angular
angular
JSON
json
file.
file
If
if
you
you
look
look
under
under
architect,
architect
build,
build
configurations,
configurations
You'll
you'll
see
see
one
one
for
for
production
production
with
with
all
all
of
of
the
the
options
options
required
required
for
for
our
our
production
production
build.
build
So
so
those
those
are
are
the
the
core
core
features
features
of
of
the
the
Angular
angular
CLI,
cli
but
but
let's
let's
look
look
at
at
a
a
few
few
other
other
tricks
tricks
that
that
it
it
has
has
up
up
its
its
sleeve.
sleeve
Let's
let's
imagine
imagine
we
we
have
have
an
an
existing
existing
app
app
that's
that's
on
on
an
an
older
older
version
version
of
of
Angular
angular
and
and
we
we
want
want
to
to
update
update
it.
it
In
in
Angular
angular
6,
6
we
we
now
now
have
have
this
this
ng
ng
update
update
command,
command
which
which
will
will
update
update
all
all
of
of
our
our
npm
npm
packages
packages
to
to
the
the
latest
latest
and
and
greatest
greatest
version
version
of
of
Angular.
angular
Or
or
what
what
if
if
we're
we're
stuck
stuck
and
and
we
we
wanna
wanna
look
look
up
up
something
something
in
in
the
the
documentation.
documentation
We
we
can
can
simply
simply
run
run
ngdoc
ngdoc
with
with
the
the
search
search
term
term
that
that
we
we
wanna
wanna
search
search
and
and
that
that
will
will
open
open
up
up
the
the
Angular
angular
docs
docs
so
so
we
we
never
never
have
have
to
to
leave
leave
the
the
command
command
line,
line
yet
yet
another
another
way
way
that
that
the
the
CLI
cli
makes
makes
your
your
life
life
a
a
little
little
bit
bit
easier.
easier
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
building
building
apps
apps
with
with
Angular,
angular
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
exclusive
exclusive
content
content
that
that
you
you
won't
won't
find
find
anywhere
anywhere
else
else
designed
designed
to
to
help
help
you
you
build
build
and
and
ship
ship
your
your
app
app
faster.
faster
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The Basics video series covers the fundamentals of Angular 6, including 5 to 10 videos covering the basics, command line interface, and hungl extension. The series also covers the use of the CLI and file directory, as well as updating the app module. The speakers explain how to use the command line to build a boilerplate code for an app, including running it and adding the O flag, and how NG add is used to set up a web app and create a spec file. They also discuss the use of NG add, a new feature in Angular 6 that automatically sets up test driven development and adds third-party packages or libraries. The speakers provide more information on the use of the NG add command and how it can be used to update and package an app for faster development.
Angular CLI - The Basics
Today, I'm starting a new video series called The Basics. It will consist of 5 to 10 videos designed to teach you the fundamentals of Angular 6. To kick things off, we're going to start with one of the most powerful features of Angular, which is the CLI. A ton of new features were added to the CLI in version 6, and my goal is to show you how to use it effectively to dramatically speed up the development time of your app. If you're new to the channel, make sure to like and subscribe and grab the full source code from Angular Firebase of COM. So the main goal of Angular's command line interface is to automate things that you would otherwise have to do manually, and it does a really good job of that compared to what other web frameworks offer. The reason I chose it as the topic for this first basics video though, is because you really need to know how to use the CLI before you can use Angular effectively. To get started, you wanna bring up a command line terminal, which I'm doing here in Versus Code, then run npm install angular cli flag global. That should install version 6.0 or greater on in your system, giving you access to the ng command. You can verify the install by running ng flag v, which will print out some information about your local development environment. Then the first command that you'll run is NG new. The new command will generate all of the boilerplate code that you need to start a brand new Angular project from scratch. You'll go ahead and say ng new with the name of your app, and then there's a number of different options that you can pass in with the command. Let's say you wanna use a CSS extension. You can simply pass in the style flag along with Sass, Less, Stylus, or whatever you wanna use. And if you wanna take advantage of Angular's router, you can pass in the of routing option, and that will automatically generate the router for you. There's a bunch of other options which you can check out on the documentation on GitHub, but I use these two options very frequently. When you execute this command, it's going to generate a new directory based on the name of your app, then it creates all the files necessary to build and test an Angular app. Now that we've created this directory, we'll go ahead and run code with the name of that directory to open the project up in Versus Code. If you're not using Versus Code, just open up the project in your IDE. As you can see here, we have all of our files generated and all of our node modules installed. But there's one file that's special when it comes to the CLI, and that's the Angular JSON file. For right now, we don't have to modify anything inside this file, but just know that it exists to control the behavior of the CLI. As you become a more advanced Angular user, you'll be able to do some very powerful things here to build your own libraries, control the build process of your app, and build your own custom schematics for boilerplate code, but we'll cover that stuff in a more advanced video. What we wanna do next is make sure that our app works properly by running ng serve. Run the command from the command line and add the o flag to have it automatically open up in your browser. The command will compile all of your code with webpack and then spin up a web server so we can view it on local host 42 100. And the cool thing about it is that it will rebuild your code on every change. Let's go into the source code for this app in the app component. And instead of saying welcome to title, we'll say hello, world, title. When we make our changes, we see them instantly reflected on the app itself. Now that we have a working skeleton app, let's look at how we can generate boilerplate code to build our components, services, pipes, etcetera. When you call generate, you're pointing to a schematic. A schematic can be thought of as a template that has some specific rules that can be followed based on the command line arguments that you pass to it. Every schematic takes a different set of arguments, and we can figure out what those arguments are by running ng generate with the schematic name, in this case, component, and then flag help. As you can see here, it prints out a bunch of different options that we can pass into the schematic when it generates the code for us. This is an important concept because it's not just generating the files for us, it's also putting them in a specific spot and updating the other files that depend on them. For example, in Angular, we have a concept of modules. So when we generate a component, we need to declare that component in its parent module. So let's look at the most common use case. We'll run ng generate component and give it a name of cool. You'll notice that it creates 4 different files, but it also updates our existing app module. As you can see here, it added the cool component to the declarations in the g module and also handled the TypeScript import for us. So it eliminates those tedious little things that are necessary for the app to work. Then if we look in the cool directory, you can see it generated our component files that we can use to start writing code immediately without having to do any boilerplate setup. Once you get comfortable with the CLI, you'll be able to shorten these commands with aliases. For example, you might run ng generate component neat. Then we'll tell it not to generate our testing file, then we'll also give it an inline template and an inline style sheet with the t and s flags. Just like before, it generated the component directory and updated the app module. But this time, it only generated one file because we told it to use an inline template and style sheet, so all of that code is contained directly in the component type script. That just shows you how the CLI can give you flexibility based on your developer preferences. As an Angular developer, one thing you should be doing is compartmentalizing your code into NG modules. By default, the CLI will import a component that's generated into your root app module. But what if you're trying to generate a component for a feature module? Let's see how we might handle that. 1st, we'll generate a module called awesome. Now let's say we want to add a pipe to this module called lowercase. There are 2 different ways we can handle this. The most straightforward way is to just generate this pipe in the same directory as our awesome module. When doing that, the CLI is smart enough to know to import this pipe in the awesome module and not the root app module like it normally would. But sometimes your component might be in a different directory. So there's another way to add it to the module, and we can do that by simply running the same command by adding the m flag for module and then point it to the awesome module. This pipe is generated outside of the awesome directory, but it still gets imported properly and declared in the awesome module. So just to reiterate, the generate command is super powerful, and there's a bunch of built in schematics that handle most of the boilerplate cogeneration that you'll need in Angular. And you can even use custom schematics for third party Angular libraries such as n g or x. So now that we've generated all this code, how are we going to test it? One of the great things about the CLI is that it automatically sets you up for test driven development. All we have to do is run NG test, and it's going to pull up this test runner in the browser, which is powered by Karma and Jasmine. Every time you run the generate command, it creates a spec file that you can use to test the code that you generated. So far, we have 7 specs, and they're all passing except for 1. If you remember earlier, we changed the title from Welcome to App to Hello World App, and that's causing our specs to fail. Just like NG serve, this will automatically run our specs on every file change. So if we change this back to welcome to, it's going to rerun all the tests, and you see this time, all of them pass. The next thing we're going to look at is an awesome new feature called NG add which was introduced in Angular 6. It allows you to add third party packages, or libraries with 0 configuration. For example, if we want to make our Angular app a progressive web app, There is normally a bunch of files that we would have to create manually. But now we can just run n g add at angularpwa, and it's going to create all these files for us automatically. In previous videos, I've showed you how to set up PWAs in Angular. But now with ng add, those videos are pretty much obsolete because we can just run this command and it will generate the service worker config file. It will install the dependencies for us, and it will also generate the icons necessary to be a valid PWA. But n g ad is not limited to just packages created by the Angular team. Any third party library can create its own schematics to automatically added as a dependency to an Angular project. Let's take a look at the NG Bootstrap library. Normally, to install this, we would have to run npm install and then imported into our app module, then called the forRoot method on that module. But with ng add, we can skip this entire process and just handle all these steps with a single command from the CLI. Run ng add ng bootstrap slash schematics. This installs the package via npm and then also handles the import steps in our app module. Again, this is brand new in Angular 6, so there's not many packages that have this functionality, but we'll definitely see a lot more of this in the coming year. Now the last thing we're going to look at is ng build. Once you finish writing all your code, you'll need a way to package and bundle your app so it can be deployed to a web host. When you run ng build flag prod, It's going to minify and optimize your code and tree shake away any dead code that would make your bundle size larger than necessary. In other words, it's going to package your app to be as performant as possible for the end user. The final code can be found here in the dist folder, and this is what you would actually deploy to a web host. For example, if you were using something like Firebase, you could just run Firebase deploy and point it to this disk folder. And, again, your entire build process can be customized in the Angular JSON file. If you look under architect, build, configurations, You'll see one for production with all of the options required for our production build. So those are the core features of the Angular CLI, but let's look at a few other tricks that it has up its sleeve. Let's imagine we have an existing app that's on an older version of Angular and we want to update it. In Angular 6, we now have this ng update command, which will update all of our npm packages to the latest and greatest version of Angular. Or what if we're stuck and we wanna look up something in the documentation. We can simply run ngdoc with the search term that we wanna search and that will open up the Angular docs so we never have to leave the command line, yet another way that the CLI makes your life a little bit easier. I'm gonna go ahead and wrap things up there. If If this video helped you, please like and subscribe. And if you're serious about building apps with Angular, consider becoming a pro member at angularfirebase.com. You'll get access to exclusive content that you won't find anywhere else designed to help you build and ship your app faster. Thanks for watching and I'll see you soon.
The Basics video series covers the fundamentals of Angular 6, including 5 to 10 videos covering the basics, command line interface, and hungl extension. The series also covers the use of the CLI and file directory, as well as updating the app module. The speakers explain how to use the command line to build a boilerplate code for an app, including running it and adding the O flag, and how NG add is used to set up a web app and create a spec file. They also discuss the use of NG add, a new feature in Angular 6 that automatically sets up test driven development and adds third-party packages or libraries. The speakers provide more information on the use of the NG add command and how it can be used to update and package an app for faster development.