#5. Project structure of Angular 10 project

Read time : 8-10 minutes

Project Structure of Angular 10.

Project Structure Description :

1. e2e.

End to end testing (E2E) or also known as integration testing is a great way to make sure at a high-level overview that our applications function correctly. Commonly we use E2E tests to help ensure our components are working correctly together to create an entirely functioning feature cohesively. E2E tests are not Unit tests. Unit tests should test a small isolated piece of code while the E2E test is a high-level test of a feature or several interactions. E2E tests are also ideal for making sure critical line of business features such as checkouts and sign-ups are well tested. I won’t dig into all the details of Unit tests vs. E2E tests but focus on how integration and E2E tests work in Angular.

2. node_modules

Basically packages are dropped into the node_modules folder under the prefix. When installing locally, this means that you can require("packagename") to load its main module, or require("packagename/lib/path/to/sub/module") to load other modules.

Global installs on Unix systems go to {prefix}/lib/node_modules. Global installs on Windows go to {prefix}/node_modules (that is, no lib folder.)

Scoped packages are installed the same way, except they are grouped together in a sub-folder of the relevant node_modules folder with the name of that scope prefix by the @ symbol, e.g. npm install @dorado/package would place the package in {prefix}/node_modules/@dorado/package. 

If you wish to require() a package, then install it locally.

3. src

For a single-application workspace, the src/ subfolder of the workspace contains the source files (application logic, data, and assets) for the root application. For a multi-project workspace, additional projects in the projects/ folder contain a project-name/src/ subfolder with the same structure.

4. app

Inside the src/ folder, the app/ folder contains your project's logic and data. Angular components, templates, and styles go here. Defines the logic for the app's root component, named AppComponent

5. assets

An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its assets folder.

6. environments

A project's src/environments/ folder contains the base configuration file, environment. ts , which provides a default environment. You can add override defaults for additional environments, such as production and staging, in target-specific configuration files.

7. index.html

Application start up html file

8. main.ts

main.ts file is the entry point of our web-app.It compiles the web-app and bootstraps the AppModule to run in the browser. It starts with importing the basic module which we need.

9. polyfills.ts

Polyfills in basic language are extra lines of code which make your application compatible for different browsers. The code we write is mostly in ES6 and is not compatible with IE or firefox and needs some environment setups before being able to be viewed or used in these browsers. So, the polyfills takes uo the task abd do these low level setups for you.

Polyfills.ts was provided by angular to help you do away with need to specifically setup everything. If you read the comments, you will find that each polyfill has certain browser associated. You just need to uncomment the line, do an npm install if required and save the file. Explore the file and you will get the necessary information.

10. styles.scss

Global css style sheet.

11. test.ts

For test cases.

12. .editorconfig

This is optional and related to visual studio code editor . Basically it has the collection of  visual studio code plugin.

13. .gitignore

Gitignore file is used to maintain untracked files which will be useful during git commit process to ignore the files. if each line added in gitignore file is to stop tracking the files during commit files. The angular project can be generated manually as well as an angular CLI tool.

14. angular.json

A file named angular. json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.

15. karma.config.js

Karma is a tool which spawns a web server that executes tests defined by using supported test frameworks for each connected browser. Karma can be used to do testing using most of the common frameworks (including Jasmine, Mocha, QUnit).

16. package.json

package.json is used by all projects in the workspace, including the initial app project that is created by the CLI when it creates the workspace. Initially, this package.json includes a starter set of packages, some of which are required by Angular and others that support common application scenarios.

17. package-lock.json

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates

18. tsconfig.json

The tsconfig.json file is a "Solution Style" TypeScript configuration file. Code editors and TypeScript’s language server use this file to improve development experience. Compilers do not use this file.

The tsconfig.json file contains a list of paths to the other TypeScript configuration files used in the workspace.

{
 "files": [],
 "references": [
   {
     "path": "./tsconfig.app.json"
   },
   {
     "path": "./tsconfig.spec.json"
   },
   {
     "path": "./projects/my-lib/tsconfig.lib.json"
   }
 ]
}

19. tsconfig.app.json

Application-specific Karma configuration

20. tsconfig.base.json

The tsconfig.base.json file specifies the base TypeScript and Angular compiler options that all projects in the workspace inherit. The TypeScript and Angular have a wide range of options which can be used to configure type-checking features and generated output.

21. tsconfig.spec.json

22. tslint.json

This is basically a code checking tool, which helps us to write high quality code, before going to the production.

---

For more updates please follow us on :

Twitter      : https://www.twitter.com/dorado2041
Facebook  : https://www.facebook.com/dorado2041
Instagram : https://www.instagram.com/dorado2041
Blogger      : https://doradosolutions.blogspot.com