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:

• Install Node.js on Windows
• Install Node.js on macOS

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:

• WebStorm, the best IDE for JavaScript, developed by JetBrains
• Visual Studio Code, free and open source IDE, developed by Microsoft

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.

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/README.md (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/tsconfig.app.json (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
├── README.md
├── angular.json
├── node_modules
├── package-lock.json
├── package.json
├── src
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Here is a brief description of these files and folders:

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:

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:

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:

Conclusion

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.