Angular Project File Structure

The Code Points May 22, 2022 0

In this article, We will learn about the Angular file structure and some of the configuration files and functions.

A project is a collection of files that make up a standalone program, a library or package, or a set of end-to-end tests.

The Angular CLI command ng new <project name> gets us started when creating an Angular application. When we run this command, the CLI creates a new workspace with a root folder named <project name> and installs the necessary Angular npm packages and other dependencies.

It also builds the workspace and startup project files listed below:

A skeleton app project (located in the src/folder).

The e2e/subdirectory contains an end-to-end test project.

Files relating to configuration.

Workspace files:

A series of workspace configuration files are located at the top level.

• .editorconfig: Code editors' configuration.
• .gitignore: Specifies that Git should disregard purposely untracked files.
• angular.json: The workspace's CLI setup defaults for all projects, including configuration choices for the CLI's build, serve, and test tools, such as TSLint, Karma, and Protractor.
• node_modules: This provides npm packages across the entire workspace.
• package.json: Configures and manages the npm package dependencies available to all projects in the workspace.
• package-lock.json: Provides version information for all packages installed by the npm client into node modules. This file will be yarn.lock if you use the yarn client.
• tsconfig.json: TypeScript and Angular template compiler parameters are included in the workspace's default TypeScript configuration.
• tslint.json: TSLint setup for programs in the workspace by default.
• README.md: The application's introduction documentation

Project files:

The CLI command 'ng new todo' makes a new app skeleton and creates a workspace folder named todo. The default app for CLI commands is this one (unless you change the default after creating additional apps).

The source files for a root module and a root component and template are included in a newly created app. You may use the ng generate command on the command line to add functionality and data to the basic app after the workspace file structure is in place.

You can use an interactive development environment like Angular Console or change files directly in the app's source folder and configuration files and utilize the CLI on the command line.

The source files (app logic, data, and code) are located in the src/subdirectory.

• .app/ Contains the component files that define your app's functionality and data.
• .assets/ Images and other asset files should be copied as-is when building your application.
• environments/ Build configuration options for specific target environments are included. A typical development environment and a production ("prod") environment are created by default. Additional target environment configurations can be defined.

• browserslist Allows various front-end tools to share target browsers and Node.js versions.
• favicon.ico In the bookmark bar, a symbol to utilize for this app.
• index.html When someone visits your website, the primary HTML page is served. When constructing your project, the CLI will automatically add all JavaScript and CSS files, so you won't need to add any Script manually> or Link> tags.
• main.ts This is your app's principal entry point. Compiles the program with the JIT compiler and bootstraps the root module (AppModule) for browser execution. You can use the AOT compiler without modifying any code by appending the -–aot flag to the CLI build and serve commands.
• polyfills.ts Polyfill scripts are provided for browser support.
• styles.sass The CSS files that provide styling for a project are included here. The style preprocessor you've set up for the project is reflected in the extension.
• test.ts With some Angular-specific settings, this is the principal entry point for your unit tests. This file is rarely needed to be edited.
• tsconfig.app.json The workspace-wide tsconfig.json file is inherited.
• tsconfig.spec.json The tsconfig.json file for the entire workspace is used.
• tslint.json The workspace-wide tslint.json file is inherited.

Project e2e files:

A subfolder called e2e/ has the setup and source files for a series of end-to-end tests that match the original program. This project can see workspace-wide node modules dependencies.

App folder:

The app/ folder is located within the src/ folder and includes the logic and data for your app. Here you'll find Angular components, templates, and styles. Images and anything else your app requires are stored under the assets/ subdirectory. The top-level files in src/ help you test and run your app.

• app/app.module.ts: AppModule is the root module that tells Angular how to assemble the application. Only the AppComponent is declared at first. As you add more features to the app, you'll need to define them here.
• app/app.component.html: The HTML template for the root AppComponent is defined here.
• app/app.component.ts: AppComponent defines the logic for the app's base component. As you add components and services to your app, the view associated with this root component becomes the root of the view hierarchy.
• app/app.component.css: The core AppComponent's base CSS stylesheet is defined here.
• app/app.component.spec.ts: A unit test for the root AppComponent is defined.
• assets/* Image and other asset files should be copied as-is when building your application.
  
  

Conclusion:
In this article we learn about the Angular file structure and some of the configuration files and functions.
I hope this article helps you and you will like it.👍


Next Article : Angular Architecture Overview

Previous Article: Getting Started With Angular