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.js.map (main) 10.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (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.

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>
</div>

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.

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.

Reference

https://v2.angular.io/docs/ts/latest/guide/webpack.html

Visit the angular tutorial list. And make strong your angular concept. click here. wuschools.com 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.