Angular 8 WebPack & Project Structure -Part-II
Angular 8 By Sagar Jaybhay– Part II
It is a command line tool.
To check node version and angular version use below command.
To create new project using angular cli
Ng New hello-sagar-jaybhay
Above files where created when we run that command.
ng serve –o
is the command used to run the application and it will start or host web on address localhost:4200//
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.
- E2e: an end to end test folder in which you can write an automated test case.
- 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.
- 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.
- Environment: in this folder, we can save a different setting in a different environment.
- 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));
- Style.css: global styles are written here even though each component have its own style.
- .editorconfig: editor related setting are here.
- gitignore: git related configuration like exclude some files and folder in a git repository.
- 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.
- 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.
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.