In this Tutorial, we will see the project structure of an Angular application. When we run the Angular CLI command ng new project_name to create Angular application, the CLI installs the necessary Angular npm packages and other dependencies in the root folder. Let's discuss the project files one by one that you need to know about it.
Now Open the project which we have created named TestProject in D drive using Command - ng new TestProject.
Now open the Project Select File ->Open Folder
Now Project file Structure with the angular version will see as below:
Visual Studio Code is a code editor to support for development operations like debugging, task running, and version control.
A launch.json file is used to configure the debugger in Visual Studio Code. Visual Studio Code generates a launch.json under a .vscode folder in your project with almost all of the required information regarding debugger.
tasks.json is used to execute anything else you may want, be that source code formatters, bundlers or a SASS compiler. To use a configuration from tasks. json , you select Run Task from the command list.
It just a directory created by NPM to view each packages you install locally via package.json. If you had tried deleting the node_module folder and ran the application, you will get Error: Cannot find module some-module/methods.
This folder contains the files needed to create the UI of an application, main code files, all the business logic code related to our application.We can say that our application's 99% of the code is done under the Src folder.
app.module.ts - It is an TypeScript file holds all dependencies related to components. Here we will use NgModule and define the Bootstrap component when start loading the application.
The below are the root files of Angular Application.
This file is used by the build system to adjust CSS and JS output to support the specified below browsers. You can see what browsers were selected by your queries by running: npx browserslist.
Making code more readable is by far the most important reason to use it. This improves the maintainability of the project and the speed that people can work.
As a name suggested gitignore file is a text file that tells Git which files or folders to be ignore from a project.
This file is located in the root folder of the project. It provides project-specific configuration defaults for build and development tools provided by the Angular CLI command.
The package-lock.json is used to lock dependencies related to version number. Whenever we change something on the node_modules or package.json, this file will be generated and will associated with NPM.
This file holds various metadata which relevant to the project. This file is used to give information to NPM packages that allows it to identify the project as well as handle the project's dependencies. The main purpose of the file is to contain the information about the NPM packages that we have installed for our project.
This file is created by default when we create project. It contains our project description about automatically reload application if any change in code and save the file. It also shows how to build and which Angular CLI version has been used.
This is a configuration file which overrides the tsconfig.json file with relevant app-specific configurations.
This file overrides the tsconfig.json file with app specific unit test configurations when we run the ng test command.