Project Structure of Angular

When you create an Angular 9 project using the Angular CLI, it generates a default project structure that looks like this:

node_modules/: folder is a directory that contains all of the project’s dependencies. It is created and managed by the Node Package Manager (NPM), which is a package manager for the Node.js platform. So whenever you install any new dependency by using npm install ‘dependency_name’ all the dependency file added in node_modules folder

• src/: This directory contains the source code for your application.
• src/app/: This directory contains the main application code, including the root AppComponent and its associated templates, styles, and unit tests. It also includes the AppModule, which is the main module of your application.
• src/assets/: This directory contains static assets such as images and fonts.
• src/environments/: This directory contains environment-specific configuration files, such as environment.ts and environment.prod.ts.
• src/favicon.ico: This is the favicon for your application.
• src/index.html: This is the main HTML file for your application.
• src/main.ts: This is the entry point for your application, where you bootstrap the main AppModule.
• src/polyfills.ts: This file contains polyfills for older browsers to support modern features used by Angular.
• src/styles.css: This file contains global styles for your application.
• src/test.ts: This file is the entry point for your unit tests.
• src/tsconfig.app.json: This is the TypeScript configuration file for your application.
• src/tsconfig.spec.json: This is the TypeScript configuration file for your unit tests.
• angular.json: This file contains project-level configuration options for the Angular CLI.
• package.json: The package.json file is used by the Node Package Manager (NPM) to install, manage, and update dependencies for your project. When you run npm install, NPM looks at the dependencies listed in package.json and installs them, along with any other dependencies that those packages require.

In addition to dependencies, the package.json file also contains other metadata about your project, such as its name, version, description, author, license, and scripts. You can edit the package.json file manually to add or remove dependencies, update package versions, or modify other metadata about your project.

Get shubham mishra’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The package.json file is an important part of the development workflow in an Angular project, as it allows you to easily manage and update dependencies and other project metadata.

name

The name field specifies the name of your package or project. This should be a unique identifier that identifies your project on NPM and other package registries.

version

The version field specifies the current version of your project. This should be a version number in the form of major.minor.patch, where major represents a major release, minor represents a minor release, and patch represents a patch release.

description

The description field provides a short description of your project. This is typically used in package listings and other places where a brief summary of your project is needed.

dependencies

The dependencies field is an object that lists all of your project's runtime dependencies. These are the packages that your project requires in order to run.

devDependencies

The devDependencies field is an object that lists all of your project's development dependencies. These are packages that your project requires during development, but are not needed at runtime.

scripts

The scripts field is an object that contains a set of scripts that can be run using the npm run command. These scripts can be used to build, test, and run your project, among other things.

• tsconfig.json: This is the TypeScript configuration file for the project.
• README.md: This is the project's main documentation file.

In the next article we will see how we can use docker for angular.

https://medium.com/@mshubham2002/angular-with-docker-72c22b781ad3

If you found this article helpful, please consider giving it a like and sharing it with your friends and colleagues to help spread the word!