Angular – Step 2 -Project Structure

It’s worth dedicating a little bit of time to outline the important files and folders that you will commonly work in — and also understand some of the under-the-hood stuff that makes Angular work.

The folder and file structure looks like this in an Angular project:

├── e2e/
│   ├── src/
│   └── protractor.conf.js
├── node_modules/
├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   └── test.ts
├── .angular.json
├── package.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

  • The e2e folder contains an end-to-end testing setup using Protractor.
  • The node_modules folder contains all the installed dependencies for the project.
  • The src folder contains the source code for the Angular application, including the app folder for components, assets folder for static files, environments folder for environment-specific configurations, index.html as the root HTML file, main.ts as the entry point for the application, polyfills.ts for polyfills, styles.scss for global styles, and test.ts for test setup.
  • The .angular.json file contains configuration options for the Angular CLI.
  • The package.json file contains metadata about the project, as well as the list of dependencies and scripts to run.
  • The file is a TypeScript configuration file for the Angular application.
  • The tsconfig.json file is the base TypeScript configuration file for the project.
  • The tsconfig.spec.json file is a TypeScript configuration file for the project’s tests.
  • The tslint.json file contains the configuration for the linter used in the project.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.