9.1 Building for Production

Hi folks. In this lesson, we're going to see how we can get our app ready to be deployed. We've finished development, we've written our unit tests, so now we're starting to think about deployment. Thankfully, the Angular CLI makes this process incredibly easy. So far, we've been using NgServe to run our application locally on a development server. But in this mode, Angular does things like loading the template asynchronously and compiling the application in the browser. These things are useful for development, but they aren't especially useful for production because they're not completely secure or as performant as they could be. In order to create a deployable production build then, we can run the NG build command and use the dash dash prod flag. So this build takes a bit longer than a regular development build becauseAangular will be pre-compiling templates and compiling the application. And it looks like we've got an error in the route's file. Let's just go and fix that. And it looks like we're missing a closing curly bracket here. And let's try that production build again. So this build will take a bit longer, because Angular will be pre-compiling all the templates and building the app. Once it finishes though, we should see a new dist folder, and inside here should be the deployable assets that the Angular CLI has created for us. So we can see that we have this dist folder now. And inside the dist folder, we have all our concatenated and minified files, we've got a separate one for the inline bundle. We've got one for the main bundle, so that's mostly all of our code. There's one there for the poly fills. And also, the fun files and a combined minified CSS file has been added too. So we'll still need a web server to actually be able to run the index.html page that's been put into the dist folder for us. Normally, I might use the built-in visual studio development server to run this file, but that's not gonna work in this case either. But luckily, the Angular CLI allows us to run the built-in development server in production mode. So we can add the hyphen hyphen prod flag to the NG Serve command. And this will do a production build, and it will then launch the Webpack Dev Server, so that we can preview the built version of the application. Everything looks the same as it did before. Let's just open up the console, and let's just open the sources panel this time. And we can see that we don't get access to any Webpack things. Sometimes, there's a Webpack expandable option down here and that contains all of the individual files. We don't have that this time. We just have the combined and concatenated files here. And we can see that it definitely is minified, so it definitely is part of our production build. So, in this lesson we've wrapped up the practical side of the course with a quick look at how we can create a deployable bundle that is ready for production using the Angular CLI. Thanks for watching.