This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Angular CLI" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

Discussing the problems associated with moving pieces involved in building JavaScript applications, Lukas covers how Angular CLI can streamline app development.

Get Unlimited Access Now

Transcript from the "Angular CLI" Lesson

>> Lukas Ruebbelke: Let's get into the Angular CLI, this is going to be a very, very, very quick module. This could be a theoretical topology for in any application as you kind of have this division of these things and these pieces. Well, if you've ever tried to put together a workflow, it could also look like this.

[00:00:21] And even to a point is, who's using Yeoman anymore, or Grunt or Bower? Like at one point, they were incredibly prevalent, now, the entire ecosystem is shifted, with npm and web had being major players. I mean, there are other things, but as a whole you have to really have a deep understanding of your tool chain.

[00:00:47] And there is just tons of permutations, and tools cropping up that, I think JavaScript as a language and as a platform is not as mature as something like Java or C# and use different things. And so you have a lot of I think volatility around kind of what tools do you use, like npm, well, who's heard of Yarn?

[00:01:11] That's the big hot thing, should you be using Yarn? I don't know, these are kind of these questions, do I use this tool or not? I'm so, I'm tired, it's fatigue. And so, this is kind of how I just kind of feel about this sometimes. When I had to reason about like what do I use?

[00:01:29] All right, well, so this is, I think, one of the best things around Angular is that they provided CLI to streamline a lot of this.
>> Lukas Ruebbelke: And it quite simply is this. Before, if you did any of the Angular Beta stuff, before they introduced the CLI, it was a mess.

[00:01:51] We couldn't decide, are we doing SystemJS, are we doing WebPack, on and on and on and on. Now, install Angular CLI, and once you've done that it really comes down to three lines: ng new, step into it, ng serve, and that's it. This right here is reduced hours and hours of time, frustration, and at least three buckets of tears on my end.

[00:02:17] Let me say this.
>> Lukas Ruebbelke: There is, I've run into some individuals, that it's like, I'm a programmer, like, well what do you do? It's like, I build WordPress websites. And I'm not disparaging WordPress, I think it's amazing. But because somebody can do a website and they're using WordPress, is often times at least to a very shallow understanding of actually how to program.

[00:02:47] And so using the Angular CLI, especially the generators, can lead to a superficial understanding of what's happening under the hood. And so initially, I recommend do not use the CLI as a crutch. And so we're going to do a small sample exercise in this module. When we get into components, I'd like you to do it by hand.

[00:03:11] Take the time to build the muscle memory. And so for me, now I will use the CLI because I know how it works, I know how the pieces work. But just doing it by hand is the equivalent of playing piano scales, not super fun, but you basically need to get that muscle memory so you know how things work and then you can start to use the CLI.

[00:03:35] So I'm just encouraging everybody, don't be like, why do I have to understand how to write a component, like the CLI's gonna do it for me. Don't let it be a crutch, really understand what's happening and build the muscle memory up. All right, so this is what you get, and I could stop at the first line, mic drop, and walk off.

[00:03:56] So a fully functional product that just works, yay. Code generators, build generation, unit test runner, end-to-end test runner, you can deploy to GitHub pages, linting, this is a big one, CSS preprocessor support, ahead-of-time compilation, lazy routes. And I leave this on here, like I've talked about this probably for two years and they keep promising me it's gonna happen so I'm just leaving it on there.

[00:04:23] They keep saying that extensible blueprints are coming soon, cuz what I would love to say is, I need to create or generate this very specific thing, let's say I had a fire-based service. I would love to just do a blueprint, plug it in to my CLI, and be able to generate fire-based specific things or whatever.

[00:04:41] More importantly is I would love for you to do the blueprint and I downloaded it and benefit from your hard work, I mean, so that's the point of an ecosystem. Hopefully that'll happen, my broker, he said it, he promised it, so we will see. So, real simple commands, npm install, -g, angular/cli, so this just installs it as a global package.

[00:05:08] ng new, step into it, ng serve.
>> Lukas Ruebbelke: Now, I will say this, the time between ng new and ng serve is, it will vary but probably a good time to take a bathroom break or at least get some coffee, it takes a couple of minutes sometimes. From here we wanna generate a component, ng generate component my-new component.

[00:05:40] The beauty of this is, that when you use this it's going to automatically adhere to best practices. You can shortcut this ng g c my-new-component, so these are the aliases. And in the case of this project, because you have multiple modules especially in the route, you have to tell it where to put the component.

[00:06:08] What module does this get attached to? And so, -m app.module.ts, in this case. Services, same thing, ng g s my-service. Want to do a production build, ng build. What about, you want to test, ng test, end to end testing, ng e2e. And I'm pretty sure that these two and a few other ones are actually, if you look at your package.json it's npm test, so they actually just created that alias to be a little bit more idiomatic with kind of the rest of the universe.

>> Lukas Ruebbelke: Want to check your code quality? Ng lint, I use this quite a bit. And if you wanted to deploy to GitHub pages, pretty straightforward, I haven't done this but I could see where somebody would want to.