angular webpack

You are currently viewing angular webpack

The key package for Angular development is called an angular webpack, and it is installed automatically by ng new when the project is created. Angular webpack is a module bundler, which means that it packages JavaScript modules for use in a browser. That’s a bland description for an important function, and it is one of the key tools that you will rely on while developing an Angular application, albeit one that you won’t deal with directly since it is managed for you by the Angular development tools.

When you run the commands in the following, you will see a series of messages as angular webpack prepares the bundles required to run the example application. Webpack starts with the code in the main.ts file and loads all of the modules for which there are import statements to create a set of dependencies. This process is repeated for each of the modules that main.ts depends on, and angular webpack keeps working its way through the application until it has a complete set of dependencies for the entire application, which is then combined into a file known as a bundle.

cd example
ng serve

During the bundling process, angular webpack reports on its process as it works its way through the modules and finds the ones that it needs to include in its bundle, like this:

10% building modules 4/7 modules 3 active

The bundling process can take a moment, but it only needs to be performed when you start the development tools. At the end of the process, you will see a summary of the bundles that have been created, like this:

** Angular Live Development Server is listening on localhost:4200, open your browser on
http://localhost:4200/ **
Date: 2018-07-05T07:53:12.614Z
Hash: e8e3505bb172de5054c9
Time: 6559ms
chunk {main} main.js, (main) 10.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, (styles) 15.7 kB [initial] [rendered]
chunk {vendor} vendor.js, (vendor) 3.07 MB [initial] [rendered]
wdm: Compiled successfully.

Understanding the Development HTTP Server with angular webpack

To simplify the development process, the project incorporates the angular webpack-dev-server package, which is an HTTP server that is tightly integrated with angular webpack. The summary that reports the completion of the initial bundling process also tells you that the development HTTP server is ready and tells you the port on which it is listening for requests.

** NG Live Development Server is listening on localhost:4200, open your browser on http://
localhost:4200/ **

The default port for the development HTTP server is 4200, and once you see this message, you can open a new browser window and request http://localhost:4200, which will produce the response shown in the following image.

angular webpack

Understanding Hot Model Replacement

The bundles that webpack creates include support for a feature called hot module replacement (HMR). When you make a change to the application’s source or content files, the altered file is compiled, put into a bundle by webpack, and sent to the browser. In most cases, only a small change is sent to the browser, and the application is updated on the fly.

As a demonstration, I replaced the contents of the app.component.html file in the src/app folder with the elements shown in the following example.

Replacing the Contents of the app.component.html File in the src/app Folder

<div style="text-align:center">
 <h1>Hot Module Replacement</h1>

As soon as the file is saved, the change is detected, and webpack creates a replacement module. The HMR feature includes code that is sent to the browser in the original bundle to open a persistent connection to the development HTTP server and listen for updates. When the new module is available, it is sent to the browser, and the application is automatically updated, as shown in the following image.

angular webpack

Tip: The hot module replacement feature tries to preserve the state of the application where possible, but doesn’t always get it right, in which case reloading the browser will refresh the application.


Visit the angular tutorial list. And make strong your angular concept. click here. is always written about the Agular concept for the angular lover. Ang writes about how angular makes your life easy if you are a web site developer.

This Post Has 8 Comments

  1. Tyrone

    This is the perfect website for everyone who hopes to find out about this topic.

    You know so much its almost tough to argue with you (not
    that I actually will need to…HaHa). You definitely put a fresh spin on a topic that’s
    been written about for decades. Excellent stuff, just wonderful!

  2. Hwa

    Appreciate this post. Will try it out.

  3. Alice

    Thanks for your marvelous posting! I genuinely enjoyed reading it, you
    are a great author. I will be sure to bookmark your blog and definitely will come
    back at some point. I want to encourage yourself to continue your great
    work, have a nice holiday weekend!

  4. Petra

    Hello to every one, it’s genuinely a fastidious for me to go to see this website, it consists
    of helpful Information.

  5. Jill

    I do trust all of the ideas you’ve presented on your post.

    They are very convincing and will definitely work. Still, the posts are very brief for novices.

    Could you please prolong them a bit from next time?
    Thanks for the post.

  6. Kenny

    I like it when folks get together and share thoughts.
    Great site, stick with it!

    1. Muhammad Waqar

      Thank you Kenny!

  7. Emily

    Fine way of describing, and good paragraph to take information on the topic of my presentation subject, which i
    am going to deliver in university.

Leave a Reply