Angular 8 WebPack & Project Structure -Part-II

Angular 8 By Sagar Jaybhay– Part II

Angular ClI:

It is a command line tool.

To check node version and angular version use below command.

Angular 8 WebPack & Project Structure -Part-II

To create new project using angular cli

Ng New hello-sagar-jaybhay
Angular 8 WebPack & Project Structure -Part-II
Angular 8 WebPack & Project Structure -Part-II

Above files where created when we run that command.

Run application:

ng serve –o

is the command used to run the application and it will start or host web on address localhost:4200//

Angular 8 WebPack & Project Structure -Part-II

The above command will create these files to run our application.

Structure of Angular Application

Below is the project structure which is created after ng new project-name command.

Angular 8 WebPack & Project Structure -Part-II
  1. E2e: an end to end test folder in which you can write an automated test case.
  2. Node_modules: this is purely used for development purpose and all dependencies and required library are stored here. When we compile our application the part which required this library are compiled it into a bundle and added to a server.
  3. Src: in this folder app folder is present in that our source code of application are present and every application at least has one module and one component.
  4. Environment: in this folder, we can save a different setting in a different environment.
Angular 8 WebPack & Project Structure -Part-II
  1. Main.ts- this file is the starting point of our application like other programming languages main method like that it is the main entry point in angular application.
  .catch(err => console.error(err));
  1. Ployfill.ts: this file import some scripts file which is used to run angular application and angular framework required JavaScript framework. It fills the gap between the feature need by angular and feature supported by the browser.
  2. Style.css: global styles are written here even though each component have its own style.
  3. .editorconfig: editor related setting are here.
  4. gitignore: git related configuration like exclude some files and folder in a git repository.
  5. Karma.confg.js:- this is test runner for JavaScript file.
  6. Package.json: every project has this file. Basic settings dependencies are added here and every project has this file. The third-party lib which we used is listed inside the dependency section.
  7. tsconfig: – this is have set for typescript compiler. Based on setting present in this file compiler compile the file and produce JavaScript output files that browser can understand.
  8. Client:- is a static analysis tool for typescript code which checks for readability, functionality, and error.


Angular cli uses that tool web-pack which is built automation tool. Which takes CSS, HTML and typescript files and put it into one file for optimization purpose.

Angular 8 WebPack & Project Structure -Part-II

Webpack not allowed to modify the name of bundle and add another bundle like that.

When you change any kind of the file inside the application then webpack automatically recompile all file application and refresh the bundles. This is called Hot Module Replacement(HMR).

Whatever the bundle was created is automatically injected into that index HTML as shown below.

Angular 8 WebPack & Project Structure -Part-II

You may also like...

1 Response

  1. My partner and I stumbled over here coming
    from a different page and thought I should check things out.
    I like what I see so now i’m following you. Look forward
    to looking at your web page repeatedly.

Leave a Reply

Your email address will not be published. Required fields are marked *