Build Web Apps with Angular 2 Using a Build System

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Scott Moss: If you got everything working, you should be able to come in here. And if you have webpack dev service set up, which I think everybody does, right? Webpack dev server. And you just run that right in the root of your application. It will find the webpack config.

[00:00:20] Cuz that's the standard name of the file, just like goat file is a standard goat file name. It will find that if you hit enter and just run that, it will give you this nice little URL. Something broke. Property name is missing type app, name does not exist.

[00:00:35] Okay, so that's my, this is a TypeScript. This is TypeScript saying hey, some stuff messed up. We still built it, don't worry about it, you're good. You can run your app. Just letting you know that this stuff is messed up. That's TypeSscript complaining right there. So it's really nice to recognize those errors.

[00:00:53] But we'll address that stuff later. Let's just go look at that. Oops, what is it? This URL right here.
>> Scott Moss: Actually looks like It's not a silent error, it actually didn't build so. Actually, I think I need to go fix those. So let's see what's happening here. App incorrectly implements interface application.

[00:01:18] Okay, name string, new app.
>> Scott Moss: Is that better?
>> Speaker 2: Yeah, you don't have a name property on the app class.
>> Scott Moss: Yeah, I don't.
>> Lukas: The student becomes the teacher.
>> Scott Moss: [LAUGH] I don't know why my sublime is just crawling right now. It's 11 lines of code.
>> [INAUDIBLE]

[00:01:46]
>> Scott Moss: Yeah it must be the. I need to change it to on save. My god, man, I'm not even touching it, watch, watch, watch. Okay, wow, okay, okay, let's just.
>> Scott Moss: There we go.
>> Scott Moss: Boom, there we go, all right, that should work.
>> Scott Moss: No, doesn't like me still?

[00:02:27] Okay, error at default. App, or app type application. What are they talking about? Maybe it just hasn't built yet. Okay, that looks right to me. All right, let's try that. No, it still doesn't like it.
>> Speaker 4: You might have to explicitly define the name property in the box.

[00:02:57]
>> Speaker 2: Yeah, you gotta put the name on.
>> Scott Moss: All right, already covered.
>> Speaker 4: Because it automatically does it in the constructor for you, but when you're doing an implement, I think it [INAUDIBLE] manually do it.
>> Scott Moss: I'd rather not sit here and watch you guys watch me crawl through this sublime right now.

[00:03:15] Because this crawling. Yes, Lucas, you had a question?
>> Lukas: I'm just stretching.
>> Scott Moss: You're just stretching. Thought you were raising your hand.
>> Lukas: [LAUGH]
>> Scott Moss: So yeah, go ahead and do that and you'll know it's working when you don't have any errors and you load up your file.

[00:03:32] And if you're using the Webpack Dev server, just make sure you have an index.html on the root, cuz it's gonna look for that. If you don't really wanna load this up in the server, that's fine. Just do Webpack and build it and if it gets a clean build, go look at the output.

[00:03:46] For instance, if I go look at this output here in the bundle.js, and I scroll down. Forget about all that crap, here's my code. I scroll down right here, this is what my code compiled down to. And I can obviously tell that that's going to run in a browser.

[00:04:01] That looks fine. Fantastic. So that's a check too. If you don't want to load up a browser. So let's take 15 minutes, let's get that out the way, run into those errors, just bump your head up against the wall, me and Lukas will be here. And you'll be good.

[00:04:15] Yes?
>> Speaker 5: The question, they still aren't getting the public versus private difference?
>> Scott Moss: Public versus private ,if it's? Lukas, you want to elaborate on that?
>> Speaker 5: I guess. Let me see if.
>> Lukas: The difference between public versus private? So, one of the problems is that that syntactic sugar in TypeScript, but you can see when Scott was trying to compile this application he was throwing an error.

[00:04:50] The reason being is that he was defining his this or the name parameter is private in the constructor. And therefore, it was not satisfying the interface. And so, what he needs to do is, either define the name property on the class itself outside of the constructor or allow that to be public.

[00:05:16] In TypeScript everything is public by default. Again, it all gets stripped away at the end of the day when you compile, but it allows you to convey intent and you will throw errors, or at least throw TypeScript errors when that happens. But, it's pretty much an approximation of classical public verses private.

[00:05:39] And if it's private then you can access it and if it's public then you know, you can, so it's public-private members, but the only issue is that it's not enforced at runtime because all of that get stripped out.
>> Scott Moss: Thanks, Lukas.
>> Lukas: Yes.
>> Scott Moss: Okay, so that totally fixed it.

[00:06:01] Hello.
>> Lukas: Don't be looking at mine. Go over to that linter.
>> Scott Moss: I did, I disabled it. It's just, so this is why I switched back between Adam and Sublime. When one breaks, I go to the other one. But then the other one breaks and then the other one is like I'm working now, so I think they're like trolling me or something I don't know.

[00:06:23]
>> Speaker 5: A couple people in chat were saying they don't even know where to start. Can you put some of this code up there to give them a starting point?
>> Scott Moss: Yep.
>> Speaker 5: Or maybe walk through again.
>> Scott Moss: Yeah I'll push it up. So while I'm pushing it up, where they can start is, first thing's first, is just create a root file to their applications.

[00:06:41] So right now I have an app folder with a route.ts and just write some type of TypeScript or ES 6 code in there. So that's the starting point. Just make sure you have a file that needs to be compiled. And in this case, I made this file do an alert, so I can see it when I load it up in a browser.

[00:06:59] That way I don't have to check the logs or something. So that's the first step. The second step is to get it to compile and the way you would do that is with the webpack config. So everybody should already have the webpack tools installed globally on a computer and what not, so that stuff should already be there.

[00:07:17] Only thing you have to do now is use a loader like awesome-typescript loader or TS LOADER whichever one you want to use. Highly recommend you use an awesome-typescript loader and configure a webpack to bundle your code, that's it. And then step three is to go into a terminal, type in the webpack and watch it bundle, that's minimal, you're done.

[00:07:37] But I do recommend going a step further. Using web pack dev server. Setting up your linter. Setting up typings. And TS config. But you don't have to because we're not going to use this anyway. It's already in the starter repo. But it'd be really nice if you knew what it was.

[00:07:57] So if you feel lost you should feel lost. That's the point. Of this one, but the rest of the stuff won't be like this I promise. This one is just, this is how you gotta do it