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

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

Lukas demonstrates building a project with Angular CLI, showing how to generate a Component, a Service, a Build, and linting.

Get Unlimited Access Now

Transcript from the "Angular CLI Installation" Lesson

>> Lukas Ruebbelke: I believe everybody has went through this, but this is how this works. We're installing cli, we do a new project, and we run it. So far, so good I think, but then, if we want to generate a component you can use ng g or generate. Told that you want to generate the component and give it a name.

[00:00:23] You can also use paths, so if you need to do like relative to, so if you do it from the root is going to put it in It is a very specific place that it goes, but as an additional parameter you can kind of tell it where to go

>> Lukas Ruebbelke: So generating the service. Does the pattern make sense? ng g service. My new service, and if we wanna generate a build, ng build. Test, you wanna do end n test. We wanna lint. I haven't done this, but I believe I'll take their word for it, if you wanna deploy, and here we are, at a challenge.

>> Lukas Ruebbelke: So, let me actually, I'm gonna do a quick demonstration. Scaffolding out the service. There's a little gotcha there. I'm gonna see if I can protect you guys from,
>> Lukas Ruebbelke: All right, so I'm in the root.
>> Lukas Ruebbelke: Let's go ng g
>> Lukas Ruebbelke: Component let's think of something, I don't know.

>> Lukas Ruebbelke: We'll go students.
>> Lukas Ruebbelke: All right so you noticed that by default source app students, and then it kind of just put everything in here. So convenient, but also if I go down to if I'm not mistaken, yes it also added it to the app module, so pretty handy.

[00:02:14] So it imported it, and it added it in as declarations. Now if we wanted to do a service I found the way to do that is to go into the actual directory you wanna generate it or just dump it like right into the root. So in this case,

>> Lukas Ruebbelke: Shared ng g service, let's go like this.
>> Lukas Ruebbelke: So it's generated, but we haven't actually hooked it up. There we go, so you can see, so that's the caveat, that you have to go into the folder when you're generating a service. And then what we have to do is, we'll do a couple things.

[00:03:11] So what we have here is an index.ts file, and so this is essentially a bucket that you can export other things, so that you can import them all in one place. So if I go here, I'll show the alternates here. So we'll go widgets.service, or not, sorry, I guess we're on students.service.

>> Lukas Ruebbelke: And so we're using this essentially as a, this is what you call a barrel roll. So we're basically rolling these up, and then from here, I can do one of two things.
>> Lukas Ruebbelke: Because invariably this is going to come up.
>> Lukas Ruebbelke: I can import this directly.
>> Lukas Ruebbelke: Like so.

>> Lukas Ruebbelke: Or what I can do is because by default, because this is a note convention. When you go to a folder it will look for the index.ts, and anything that's been exported in the index.ts is now available. So now we can go, Student service. Then we'll just go down here in our providers like so.

[00:04:34] So now we're just gently kind of acquainting ourselves with kind of the shapes of an Angular 2 application.
>> Lukas Ruebbelke: Okay, and so just to reiterate, I generated, hold on real quick let me just clean some of this out.
>> Lukas Ruebbelke: I generated a student's component right here, which automatically got added to the module.

[00:05:12] Then I generated a StudentsService which I then added to the index.ts file in the shared directory. So what this does is now you can just import everything, from one place. And then within the app module TS here you can see that I was able to import all of these, and share cuz it's actually doing ./shared, and it's looking for index.ts.

[00:05:39] Yes.
>> Speaker 2: Not a question, just a comment. It's hard to tell what files you're jumping between.
>> Lukas Ruebbelke: Okay-
>> Speaker 2: I think it's kind of hard to read the file name.
>> Lukas Ruebbelke: Yeah, I'll try to verbalize, sorry about that, so if I'm jumping to a file, I will say, I'm now jumping to this file, and we can go from there.