Angular 8 Project Structure

Before we start the angular-8 application we must learn the project structure of angular. So let's start the topic in one by one. Please follow the link how-to-create-angular8-project-using-angular-cli. After creation of angular-8 project the application should like this.

The Project name is "myngapp" with followed by folder and files.

e2e

End to end testing (E2E) used for builds and serves an Angular app, then runs end-to-end tests using Protractor.
node_modules

All the packages are stored here. The node_modules directory is only for build tools. The package. json file in the app root defines what libraries will be installed into node_modules when you run npm install .
NPM is the node package manager, which installs packages locally into a project, specifically, into the node_modules folder.





src

This is the folder which contains the main code files related to your angular application.

app

The app folder contains the files of ts,css, html etc.. If any new component will generate on the app folder.
app.component.css
This file contains the cascading style sheets code for your app component.
app.component.html
This file contains the html file related to app component. This is the template file which is used by angular to do the data binding.
app.component.spec.ts
This file is a unit testing file related to app component. This file is used along with other unit tests. It is run from Angular CLI by the command ng test.
app.component.ts
This is the most important typescript file which includes the view logic behind the component.
app.module.ts
This is also a typescript file which includes all the dependencies for the website. This file is used to define the needed modules to be imported, the components to be declared and the main component to be bootstrapped.
assets
In assets folder all the static images are to be stored.
environments 
A project's src/environments/ folder contains the base configuration file,which provides a default environment. You can add override defaults for additional environments, such as production and staging, in target-specific configuration files
faviocon.ico
It is the fav icon for the application.
index.html
Index.html file is the root html of application.
main.ts
main. ts is the entry point of your application , compiles the application with just-in-time and bootstraps the application . Angular can be bootstrapped in multiple environments we need to import a module specific to the environment. in which angular looks for which module would run first.
polyfills.ts
Polyfills. ts was provided by angular to help you do away with need to specifically setup everything.Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.
styles.css
css file allows users to add global styles and supports CSS imports.
test.ts

test.ts is use for testing purpose.

angular.json 
It is very important configuration file related to your angular application. It defines the structure of your app and includes any settings associated with your application. Here, you can specify environments on this file (development, production). This is the file where we add Bootstrap file to work with Angular-8.
browserlist
This file is used by autoprefixer that adjusts the CSS to support a list of defined browsers.
karma.config.js
This file specifies the config file for the Karma Test Runner, Karma has been developed by the AngularJS team which can run tests for both AngularJS and Angular 2+

tsconfig.json
This is a typescript compiler configuration file.
tsconfig.app.json
This is used to override the tsconfig.json file with app specific configurations.
tsconfig.spec.json
This overrides the tsconfig.json file with app specific unit test configurations.



Summary

        In this tutorial we discussed angular 8 Project Structure and files. If have any question related to this topic then give your feedback.