Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Deploying Applications" 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:

Lukas reviews the ways of deploying applications. Lukas also discusses the Ahead-of-Time (AOT) compiler, which converts Angular HTML and TypeScript code into efficient JavaScript code during the build phase.

Get Unlimited Access Now

Transcript from the "Deploying Applications" Lesson

[00:00:00]
>> Lucas: Let's talk about just deploying the application. We've actually seen this quite a bit already. We've kind of touched on ng build. So, they've done this in such a way that they've set some defaults that, when you run this, certain things are gonna happen. So, first that you would do a build is set your target and your environment.

[00:00:26] So if it say, I wanna build my target for production and my environment for prod. Or you could just say ng build --prod, it's the same thing because of the defaults. You can also say target=development, environment=dev, or just ng build. So by default, you're in a development environment targeting development.

[00:00:50] So just kind of important to know that they are different and this is how. So when you run a development build, you are not getting aot, and I'll talk about that in just a minute. But, it is doing output-hashing for the media. So, in other words, is it going to hash it so it doesn't get cached, I believe.

[00:01:13] Sourcemaps are true. It's going to not pull out the css. And it's going to do named-chunks. But when you do prod, you do get aot right out of the box, which is crazy. It will hash everything. No sourcemaps. It will extract the css. It will remove the named-chunks.

[00:01:33] In other words, we saw when we did that one module. Everything was named out. It will actually just remove that optimizer. So what is AOT? AOT compilation. Simply what this means is that when your application is running, you have what's called Just In Time compilation. If something happens, there's this angular compiler, interpreting what has happened, figuring out what it needs to do, and it's compiling your template in making changes.

[00:02:07] So out of the box, everything that's happening just in time.
>> Lucas: With AOT, they're saying what's some small tweaks, we can know everything that's going to happen in your application, and so we can just write it in such a way that we do not need the compiler.
>> Lucas: And so that's why when you notice this 4 megabyte dev build down to a 1 megabyte prod build, one of the reasons why that's happening is because when we run a production build, we're taking out the compiler.

[00:02:42] Because we're able to write in such a way that it just knows what's going to happen. It's not having to guess and make assumptions. So we're just constraining this is what can happen in the application, and running a very kind of static build. So I think of this in a sense of when you are writing C# or something you actually compile it down to an executable, that's it.

[00:03:00] Like, it's not changing, you know what's going to happen. And that, it's fairly finite and fairly static. And so this is what Angular is doing is we're gonna pile this down and remove the compiler. Smaller Payload, but it's also much faster to render, because it knows exactly what's going to happen.

[00:03:22]
>> Speaker 2: So, like machine code?
>> Lucas: Kind of, so it's very optimized, so it's a smaller payload, it's not having to do async requests. But, more importantly, it's faster rendering. Because it's been optimized for specifically what has been essentially written to do, as opposed to, I need to be here in case something I haven't thought of happening, happens.

[00:03:42] And so what you're doing is you're removing kind of that, the compiler, and just saying, this is pretty much static. So for instance, the equivalent of that would be Mark was here and he's like, hey I'm gonna go work out. The minute he left, this became ahead of time workshop, because the main compiler is gone.

[00:04:05] And he's trusting on John and I to get this workshop finished, with a sufficiently high quality and to the best of our ability. [LAUGH] Boy is he gonna be in for a surprise when he gets back, but that's kind of the deal. Mark's saying, I know what's gonna happen here.

[00:04:22] There's not gonna be any surprises. I'm gonna work out. You stay here and do the workshop, to make an analogy.