This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Angular CLI" Lesson
[00:00:00]
>> Lukas Ruebbelke: I would say one of the largest problems with really any modern framework is the environment and the moving pieces. Do you use system JS? Do you use webpack? Do you use gulp? Do you use webpack? How much gulp? How much webpack? Well, now, do you use yarn?
[00:00:18] That's the newest thing, it's so hot, everybody run out. We got to use yarn and so, a lot of time I think it as like we must be looking at like an application diagram. Not really, we're looking at an ecosystem diagram. In the sense that this was really painful when Angular 2 just being born is how to actually get it to work.
[00:00:46] You would go to the five minute tutorial and you would spend 20 minutes installing typescript and these different things just to get the 5 minute, 20 minutes prep time for a 5 minute tutorial. And so, this is really I think was the general sentiment for everyone here, is you would rage develop, rage quit, and move on.
[00:01:14] So thus the Angular CLI was born. And so this is from a collaboration with the Ember CLI and so I think the one thing that Rails and kind of by extension Ember does really well is conventions. Is that they establish conventions and then just boom. You're good to go and so for instance the first time I ever heard of Rails.
[00:01:39] My gosh you can build a blog in like five minutes off of the command line. It just does everything for you. Well that kind of essence was carried over to the Ember CLI and now into the Angular CLI. And so, what the Angular CLI allows us to do is to quickly spin up a working project and it tucks away all of the moving pieces that you would generally need to get started.
[00:02:09] And so, when you are creating a new Angular project, you can just go npm install -g for global, angular-cli. And then from there, ng new, whatever your app is called, in this case my-dream-app. Jump into the directory, ng serve, and you are good to go. Now this is a bit of a falacy here because in between these four lines is about, I don't know, five to ten minutes of stuff happening depending on your computer.
[00:02:38] It's doing a lot under the hood. But the point is, you are not having to manually compose all these pieces together. Secondly, this is officially supported by the angular core team. And so as new conventions, as new tools, technology, approaches become available, this gets baked right into the CLI.
[00:03:01] Now, let me make one point real quick. The Angular CLI is not a crutch. It does do code generation, and so that is handy but we are going to not be using it to generate code for the rest of the workshop because I'm a huge believer in building up muscle memory.
[00:03:24] Do not use a code generator until you absolutely know what's going on under the hood. At the same time, I can't turn my nose up at him. Because I build out live templates and I'm lazy. And so I like being able to generate things. But it's really important initially that we do this by hand.
[00:03:47] So it's not a crutch not to learn how to write components, services, etc. But more importantly, as I see it as a mechanism for getting the environment up and running as soon as possible.
>> Lukas Ruebbelke: So here's everything that you get and more,
>> Lukas Ruebbelke: Most importantly is a full functional project generation THAT JUST WORKS!
[00:04:08] So you just get a working project, that's huge. You do get a code generator for components, directives, pipes, enums, classes, modules and services. [SOUND] It also allows you to do a production build. So this is also important if you care about actually deploying so that people can see it.
[00:04:25] You do a production build. You get a unit test runner, end-to-end test runner, and hold on. Watch me do some live coding here. Boom, I hate live coding, but that one wasn't too bad. So, you can actually deploy your app to give up pages, which is convenient. Linting, CSS preprocessor support.
[00:04:50] AOT support. Lazy routes, but, more so lazy modules that you can then load into routes. Extensible blueprints coming soon.