In this video we will discuss
1. How to compile and run an angular application locally on your development machine
2. What happens behind the scenes when we compile and run an angular application
3. What is bundling and why is it important for performance
So far in this video series we have been using the following command to build and run our angular application.
ng serve --open
Bundle File What it contains
inline.bundle.js WebPack runtime. Required for WebPack to do it's job
main.bundle.js All our application code that we write
polyfills.bundle.js Browser Polyfills
styles.bundle.js Styles used by the application
vendor.bundle.js Angular and 3rd party vendor files
What is bundling and why is it important for performance
Web browsers have a limit on how many scripts or CSS files they can download simultaneously.
Bundling can solve this problem by combining many small application and library files into a few bundles. As mentioned before, Angular CLI runs WebPack for building and bundling angular applications.
There are several ways to see these generated bundles.
1. If you have executed the "ng serve --open" command in a command prompt window, upon build completion you can see the generated bundles in the command prompt window
2. If you have executed the "ng serve --open" command in Visual Studio Code Integrated Terminal, upon build completion you can see the generated bundles in the integrated terminal window
3. "ng serve --open" command builds and runs the application. By default the application runs at port number 4200. You can change this default port number if you want to. We will discuss how to do that in our upcoming videos. When the application is served in the browser you can see the generated bundles on the "Elements" tab in Browser Developer Tools.
4. You can also see these bundles on the "Sources" tab in Browser Developer Tools.
5. To see the bundles along with their sizes click on the Network tab. If you don't see the bundles, refresh the browser window by pressing F5.
In addition to bundling, we can also use other optimisation techniques like Ahead-of-Time (AOT) Compilation, Minification, Uglification and TreeShaking to improve performance. We will discuss all these techniques and how to implement them in our upcoming videos.
The ng serve command builds and serves the application from memory for a faster development experience. It does not write the build artifacts to the disk, so we cannot use this command if you want to deploy the build to another server. For example, if you want to deploy your angular application to a test server for testing, or to your production server we cannot use ng serve. We instead use ng build. This command writes the build artifacts to the specified output folder, so the application can be deployed elsewhere. We will discuss ng build in our upcoming videos.
To customise the in-memory builds that the "ng serve" command produces, there are several options that we can use along with this command. We will discuss these options in our next video.
Text version of the video
Angular CLI Tutorial
Angular CLI Text articles & Slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic