Project Structure of angular

We have successfully created the angular project in the position we wanted, and now let's look at the structure of the project.

The following gives the overall structure of our project, including node templates, src resource files, and configuration files.

Here are the file uses within the root folder:

File	Use
e2e/	The e2e/ next is end-to-end (end-to-end) testing. They are not src/ under, because end-to-end testing is actually independent of the application, and it only applies to testing your application. That's why it has its own tsconfig.json .
node_modules/	Node.jsCreated this folder and put all the package.json third-party modules listed in it.
.editorconfig	A simple configuration file for your editor to ensure that everyone involved in your project has a basic Editor configuration. Most editors support .editorconfig files, see http://editorconfig.org for details.
.gitignore	A Git configuration file to ensure that certain automatically generated files are not submitted to the source control system.
angular.json	Angular the configuration file for the CLI. In this file, you can set a series of default values, and you can configure those files to be included when the project is compiled. To learn more, please refer to its official documentation.
package.json	npmA configuration file that lists the third-party dependency packages to which the project is used. You can also add your own custom scripts here.
protractor.conf.js	An end-to-end test configuration file for Protractor, which ng e2e is used when it is run.
README.md	The base document for the project, pre-written with information about the CLI command. Don't forget to use the project documentation to improve it so that everyone who looks at the warehouse can build your app accordingly.
tsconfig.json	TypeScript compiler configuration, your IDE will use it to provide you with better help.
tslint.json	Configuration information for Tslint and Codelyzer, which is used when running ng lint . The Lint feature can help you keep your code style uniform.

src folder: Your app code is in a src folder. All of the Angular components, templates, styles, pictures, and everything you need for your app are there. Files outside this folder are supported for building apps.

The following are the effects of these files:

File	Use
app/app.component.{ts,html,css,spec.ts}	Define components using HTML templates, CSS styles, and unit tests AppComponent . It is the root component that, as the application grows, it becomes the root node of a tree of components.
app/app.module.ts	Definition AppModule , the root module for Angular describes how to assemble the application. Currently, it only declares AppComponent . Soon, it will declare more components.
assets/*	In this folder you can put pictures and everything, and when you build the app, they're all copied to the release package.
environments/*	This folder includes files prepared for each target environment, and they export the configuration variables to be used in some applications. These files are replaced when the app is built. For example, you might use different API endpoint addresses in a production environment, or use different statistical Token parameters. Even use some simulation services. All of this, the CLI is for you to consider.
browserslist	A configuration file that is used to share the target browser between different front-end tools.
favicon.ico	Every website wants to look good in the bookmarks bar. Please change it to your own icon.
index.html	This is the HTML file that someone else visits your website to see on the main page. In most cases you don't have to edit it. When building an app, the CLI automatically adds all js and css files, so you don't have to manually add any <script> or tags here <link> .
karma.conf.js	A unit test configuration is given to karma, which ng test is used when it is run.
main.ts	This is the main entry point for the application. Use the JIT compiler to compile the app and launch the app's root module AppModule to run it in the browser. You can also use the AOT compiler without modifying any code-just give ng build or ng serve pass --aot in the parameters.
polyfills.ts	The level of support for WEB standards varies between browsers. The Putty script (Polyfill) can standardize these different points. You just have to use core-js and zone.js usually enough, but you can also check the browser support guide for more information.
styles.css	Here is your global style. In most cases, you will want to use local styles in your components for maintenance, but those that affect your entire application will need to be centrally stored here.
test.ts	This is the main entry point for unit testing. It has some custom configurations that you're not familiar with, but you don't need to edit anything here.
tsconfig.{app|spec}.json	TypeScript The compiler's configuration file. tsconfig.app.jsonis prepared for Angular applications, but tsconfig.spec.json for unit tests.
tslint.json	Additional linting configuration. When run ng lint , it is used by Tslint with Codelyzer. Linting can help you maintain code-style consistency.

Project Structure of angular