Angular starting files explanation for beginners

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

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
• .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
• package.json file which lists npm 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

Src files and directories

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.