Angular File Directory
Overview
●
Angular uses a vast structured file structure. The files used in the project are as
follow:
●
src folder: This is the main folder that contains the main code files of an Angular
application.
●
app folder in the src folder: It contains the files related to the app component.
●
app.component.css in the app folder: It contains the style code for the app
component.
●
app.component.html in the app folder: It contains the HTML code for the app
component. It is the template file used by angular to do data binding.
●
app.component.spec.ts in the app folder: It is a file used for testing. It is run
from Angular CLI using the ng test command.
●
app.component.ts in the app folder: The essential typescript file contains the
component’s view logic.
●
app.module.ts in the app folder: This typescript file contains all the
dependencies. It defines the modules needed to be imported, the components
to be declared, etc.
●
All the files mentioned above are some of the mainly used files in Angular. Apart
from these, a few more files play a crucial role in developing an Angular
application.
●
.gitignore: This file is used to ignore specific files and folders while pushing the
code onto GitHub.
●
.editorconfig: This is a simple file used to maintain consistency in code editors
to organise basics such as indentation and whitespaces.
●
assets folder: This folder contains the static files used in the application, such as
images, locales, translations etc.
●
package.json: This is the npm configuration file. It contains details about
package dependencies and information about the application.
1
●
package-lock.json: This is an auto-generated file that gets updated whenever
npm does an operation related to node_modules or package.json
●
angular.json: It defines the app’s structure and includes any settings associated
with your application. Here, we can specify the environments used in the
application (development, production).
●
polyfills.ts: This file is a set of code that can be used to provide compatibility
support for older browsers.
●
styles.css:/ This is a global css file used by the angular application.
●
favicon.ico: This file contains the small icon next to the browser tab beside the
title, i.e. the favicon
●
index.html: This is the entry-level file that holds the high-level container for the
angular application.
●
tests.ts: This is the main test file that the Angular CLI command ng test will use
to traverse all the unit tests within the application.
●
environments folder: The environments folder is used to hold the environment
variables used when building the angular application. The constants are defined
in 2 separate .ts files (environment.ts and environment.prod.ts).
●
browserlist: This file is used by autoprefixer that adjusts the CSS to support a list
of specified browsers.
●
karma.config.js: This file specifies the config file for the Karma Test Runner.
Karma has been developed to run tests for an angular application.
●
main.ts: As defined in the angular.json file, this is the main ts file that will first
run.
●
tsconfig.json: This is a typescript compiler configuration file.
●
tsconfig.app.json: This is used to override the tsconfig.json file with app-specific
configurations.
●
tsconfig.spec.json: This overrides the tsconfig.json file with app-specific unit test
configurations.
2