Skip to main content

Hello Angular


In this article, we will see how to start a new Angular project using the Angular CLI. Then, we will discover together the meaning of the files and folders generated by the CLI.

What is the Angular CLI?

The Angular CLI is the official command line interface used in the Angular ecosystem. Its objective is to simplify the life of the developer in the creation of Angular applications.

The Angular CLI is a comprehensive toolkit that allows you to quickly start a new Angular project via command ng new, generate code from predefined blueprints via ng generate, update existing code via , ng update and automatically add code necessary for some libraries that support the ng add.

The Angular CLI also supports the process of building apps with the command ng build and includes a built-in server that lets you view the app in your local development environment with the command ng serve.

Installation of necessary tools

Node.js and npm

To use the Angular CLI, you must have the latest active LTS version of Node.js. If you don't have Node.js on your machine, refer to the following guides:

Check that you have everything you need by running the following two commands which should display the versions of Node.js and npm respectively.

node -v
npm -v

IDEs: WebStorm or Visual Studio Code

To develop Angular applications, you will also need an IDE. The two IDEs I recommend are in order of preference:

The Angular CLI

Install the Angular CLI by npm running the following command in a command line window:

npm i -g @angular/cli

Once the Angular CLI is successfully installed, you will have the executable at your disposal ng which you can invoke on the command line.

To verify that you have correctly installed the Angular CLI, run the following command in a terminal:

ng version

As output from this command, you should see the version of Angular CLI you have installed, along with other information like the version of Node.js you are using and your current operating system as shown in the screenshot. next screen. Output of running ng version command

Creating a new Angular app!

Now that you have the necessary tools, you can generate a new Angular project by running the following command:

ng new my-app

This command will ask you two questions:

  • Would you like to add Angular's router? (y/N) In a real application, you would definitely need the router, but for the purposes of this article, accept the default (“No”) answer by pressing the key Enter.
  • Which stylesheet format would you like to use? Again, press the key Enter choose the default response which is “CSS”.

The following output should appear in your terminal:

$ ng new my-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

CREATE my-app/ (1059 bytes)
CREATE my-app/.editorconfig (274 bytes)
CREATE my-app/.gitignore (548 bytes)
CREATE my-app/angular.json (2700 bytes)
CREATE my-app/package.json (1037 bytes)
CREATE my-app/tsconfig.json (901 bytes)
CREATE my-app/ (263 bytes)
CREATE my-app/tsconfig.spec.json (273 bytes)
CREATE my-app/.vscode/extensions.json (130 bytes)
CREATE my-app/.vscode/launch.json (474 bytes)
CREATE my-app/.vscode/tasks.json (938 bytes)
CREATE my-app/src/favicon.ico (948 bytes)
CREATE my-app/src/index.html (291 bytes)
CREATE my-app/src/main.ts (214 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/app/app.module.ts (314 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.component.html (23083 bytes)
CREATE my-app/src/app/app.component.spec.ts (956 bytes)
CREATE my-app/src/app/app.component.ts (210 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

We'll detail what all these files are for in the next section, but for now remember that the command ng new spawned a new Angular project in the directory my-app with all the necessary files. He then installed all the dependencies required for Angular development using the npm package manager. Magnificent !

You can now navigate to the directory my-app and launch your newly generated project in the browser by running the following command:

ng serve

In your terminal, you should see output similar to this:

$ ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.71 MB |
polyfills.js          | polyfills     | 314.27 kB |
styles.css, styles.js | styles        | 209.39 kB |
main.js               | main          |  45.98 kB |
runtime.js            | runtime       |   6.51 kB |

                      | Initial Total |   2.27 MB

Build at: 2023-01-15T21:57:03.047Z - Hash: 2ac89e70ce3ac80c - Time: 4641ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Compiled successfully.

Now open localhost:4200 in your favorite browser and you should see blank start page.

Congratulation ! You have successfully developed your first Angular application. Now back to the files and folders generated by the command ng new.

Structure of an Angular project

Files and folders at the project root

Here is the list of files and folders at the root of an Angular project:

├── .angular
├── .editorconfig
├── .git
├── .gitignore
├── .vscode
├── angular.json
├── node_modules
├── package-lock.json
├── package.json
├── src
├── tsconfig.json
└── tsconfig.spec.json

Here is a brief description of these files and folders:

File or folder Description

Folder containing files cached by the Angular CLI. You will never interact directly with this folder.

.editorconfig Configuration file for IDEs and text editors.
.git Folder containing information and data managed by Git.
.gitignore File defining the list of files ignored by Git.
.vscode Folder containing configuration files for Visual Studio Code. File containing information and instructions for your project.
angular.json Angular CLI configuration file in the context of this project.
/node_modules Folder containing all npm packages your project depends on.

File automatically generated by npm and containing the exact versions of the dependencies installed in your project.


Folder containing the source code of your application. We will describe its content later in the article. TypeScript configuration file for the application part of the project.
tsconfig.spec.json TypeScript configuration file for unit testing.

TypeScript configuration file allowing to factorize the common configuration of the two files tsconfig.*.json mentioned above.

Other files that may be in the root of the project

In previous versions of Angular, you could also find the following files in the project root:

File Description
.browserlistrc File that configures the list of browsers supported by your application.
karma.conf.js Karma test tool configuration file.

Now let's detail the contents of /src an Angular project folder.

Files and folders contained in /src

The folder /src contains the sources of your Angular application. This is where you will spend most of your time writing code. Here is the list of files and folders there:

├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts
├── assets
│   └── .gitkeep
├── favicon.ico
├── index.html
├── main.ts
└── styles.css

Here is a brief description of these files and folders:

File or folder Description

Folder containing Angular entities linked to the main component AppComponent.

app.component.css CSS style sheet associated with the main component.
app.component.html HTML file defining the main component template.
app.component.spec.ts File containing unit tests for the main component.
app.component.ts TypeScript file containing main component logic.
app.module.ts File containing the module that declares the main component.
/assets Folder containing project assets like images, PDFs, etc.
favicon.ico File containing the icon that displays when the site is added to bookmarks.

The main application page that will be served to browsers by the server that will host your application. Mainly contains the tag app-root.


Main entry point of the application. Contains logic that instructs the browser to generate the application's DOM.

styles.css The application's global CSS style sheet.

Other files or folders that may be in /src

In previous versions of Angular, the following files and folders could also be found in /src:

File or folder Description

Folder containing configuration files for the build (dev mode vs production mode).

environments.ts Configuration file for development mode. Configuration file for production mode.
polyfills.ts File containing scripts to fill gaps in some browsers.
test.ts The main entry point for unit testing.


In this article, we learned how to generate a new Angular application and launch it locally using the Angular CLI. We then went to discover the files and folders generated by the CLI for a new Angular project.