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 version and node version check

To create new project using angular cli

Ng New hello-sagar-jaybhay
create angular project
Project structure

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

web compilation

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.

project files which are created
  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.
environment
  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.
platformBrowserDynamic().bootstrapModule(AppModule)
  .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.

WebPack

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.

web compilation by webpack

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.

index html webpack insertion

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 *