Angular's File Ecosystem
When you create a new Angular app, it comes with several files and folders.
Lets explore what each of them does, in simple words.
1. src folder
The src folder is the heart of your Angular project. It contains all the code and resources needed to run your app.
Inside src, you will find
app folder
assets folder
Stores static files like images, icons, fonts, and any files your app needs to display.
environments folder
index.html
styles.css
Contains global CSS styles applied across your entire app.
main.ts
The main TypeScript file that bootstraps (starts) your Angular app by loading AppModule.
The src folder is the heart of your Angular project. It contains all the code and resources needed to run your app.
Inside src, you will find
app folder
- Contains your Angular components, services, and modules.
- This is where most of your coding happens.
assets folder
Stores static files like images, icons, fonts, and any files your app needs to display.
environments folder
- Contains configuration files for different environments (like development and production).
- Helps your app know which settings to use when running locally vs. live.
index.html
- The main HTML file.
- Acts as the entry point to your app and loads everything Angular needs.
styles.css
Contains global CSS styles applied across your entire app.
main.ts
The main TypeScript file that bootstraps (starts) your Angular app by loading AppModule.
2. angular.json
- Configuration file for the Angular CLI.
- Defines how your project builds, which assets to include, and other build settings.
3. tsconfig.json
- Configuration settings for TypeScript.
- Controls how TypeScript compiles your code, such as target version and module resolution.
4. package.json
- Manages your project’s dependencies (libraries your app needs).
- Also contains scripts to build, test, or run your app.
You can use commands like npm install to add new libraries.
5. tslint.json
- Contains rules and guidelines for coding style and linting.
- Helps keep your code clean and consistent.
Note: Newer Angular versions use ESLint instead of TSLint.
6. README.md
- Documentation file, usually in Markdown format.
- Explains what your project is about and how to run or contribute to it.