Angular starting files explanation for beginners
Tags: webdev, javascript, angular
Published: 2023-04-05 15:26:08

### Introduction
Angular is a powerful framework for single-page applications. During the initialization of a new project, the CLI creates some configuration and initialization files to allow the Angular project works nicely and in the desired way. In this article, I will explain default starting files and their usage.

### New project generation
First of all, We need the project. For that, I will use the `@angular/cli` command line tool, which the developer can install by typing in the command line:
```
npm install -g @angular/cli
```
`-g` means I am installing it globally on my OS.
To create a fresh new project, I am typing:
```
ng new files-explanation
```
I am selecting all default values that are prompted by the CLI. The following section will explain files and directories placed at the root of a new project.

### Root files and directories
![Root structure screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpuuvsaonw73cledi06i.png)
Going from the top:
- `.vscode` a directory that contains configuration files that allow better setup with Visual Studio Code,
- `node_modules` a directory that contains all of the required javascript files that a necessary to run and develop the project
- `src` is a directory that contains all source files that belong to our project, the content of that directory I will explain later,
- `.editorconfig` is a configuration file that sets regular editor properties, for example, `charset` or indent_size. More about that file can be found [here](https://editorconfig.org/)
- `.gitignore` tells git which directories or files should be omitted by the version control system; for example, `node_modules` should exist in that file,
- `angular.json` is a set of configuration properties that set up our workspace and how the project behaves. More about that can find in my other [article](https://dev.to/tomwebwalker/angularjson-structure-for-beginners-what-we-can-set-27f3)
- `package.json` file which lists [npm](https://www.npmjs.com/) packages and their respective version that are required by the project to run (`dependencies`) and develop or build (`devDependencies`); and commands that can be used with the current project,
- `package-lock.json` file lists the exact versions of npm packages installed in the current project. It helps to provide precisely the identical versions when another developer is getting the code,
- `README.md` - a documentation file, which typically contains starting information for developers that are going to work with the project, for example, how to set up the project, how to develop new features, etc.,
- `tsconfig.app.json` - a typescript configuration file, which defines how typescript is behaving in the current project in development files,
- `tsconfig.spec.json` - like above, but for test files,
- `tsconfig.json` - root typescript configuration file used by two previous files and shares common configuration properties. More about that file can be found [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) 


### Src files and directories

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6e4mr0hch6hazrdbn8o.png)
The `app` directory contents are:
- `app.component.html` is a file that contains the HTML template of the AppComponent maid by default,
- `app.component.scss|css` is a file that contains sass or css stylings that are applied to AppComponent content,
- `app.component.spec.ts` is a typescript file that contains unit tests for the AppComponent,
- `app.component.ts` is a typescript file that contains the `AppComponent` class definition, which is used to declare the Angular component,
- `app.module.ts` is another typescript file that contains the `AppModule` class that defines the Angular module, which is loaded as the first module (by default),

The `assets` directory is used to put any project assets like images, fonts, and other media files. By default, that directory is a bundle with the rest of the source files during the build phase. In the beginning, there is only one file, `.gitkeep`, which tells git to not omit that directory if it is empty.

The rest of the `src` files are:
- `favicon.ico` icon file, which is used as a website icon,
- `index.html` starting HTML file, which is used by servers to display the application (by default),
- `main.ts` file, which bootstraps the whole application. Inside that file, You can place other methods or script calls that should run when the application starts. It is also a place where You define which module or component should be used as a root one,
- `style.scss|css` root styling file, which is used to define stylings applied to the whole application.

### Summary
The Angular CLI creates those files, which helps developers to save a lot of time on file creation and application structure and defines all of the requirements that are needed at the beginning. That doesn't mean, of course, that We are limited to those files only.