Angular - Project Structure

Let's see the structure of the Angular project

Root Structure

When you create an Angular project usint Angular CLI, you will see the files below (Note that Angular CLI provides us '.gitignore' file automatically)

.editorconfig	Configurations for code editors EditorConfig.
.gitignore	Files or folders that will be excluded when commiting to a Git repo
README.md	A file where you can write an instruction for the applicaction
angular.json	CLI configuraions
package.json	npm dependency list
package-lock.json	dependency version history
src/	A folder that includes all the files that are need to create the application (data, assets,...)
node_modules/	npm packages
tsconfig.json	TypeScript file. This is the parent file for all the other files

'src/' Structure

This folder contains all the files that are need to create the application.

app/	Application specific files (components)
assets/	A Folder to additional resource files such images (static files)
favicon.ico	Favicon image
index.html	main HTML
main.ts	An entry point to conver HTML. (JIT or AOT)
styles.css	Common styles (this will be different depending on the option you choose: .sass, .css, ...)

'app/' Strunture

app.component is the root component file that holds all the components. All the components created will either be a childe of the app.component or a decendent

app/app.component.ts	app.component logic
app/app.component.html	app.component HTML template
app/app.component.css	app.component styles
app/app.component.spec.ts	app.component test
app/app.module.ts	A configuration file that defines all the component and services to be used in components

Application Configurations

tsconfig.app.json	Application TypeScript configuration file
tsconfig.spec.json	Application test file

---

Refeneces

Angular