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:
- 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:
File or folder | Description |
---|---|
/.angular | 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. |
README.md | 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. |
package-lock.json | File automatically generated by npm and containing the exact versions of the dependencies installed in your project. |
/src | Folder containing the source code of your application. We will describe its content later in the article. |
tsconfig.app.json | TypeScript configuration file for the application part of the project. |
tsconfig.spec.json | TypeScript configuration file for unit testing. |
tsconfig.json | TypeScript configuration file allowing to factorize the common configuration of the two files |
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 |
---|---|
/app | Folder containing Angular entities linked to the main component |
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. |
index.html | The main application page that will be served to browsers by the server that will host your application. Mainly contains the tag |
main.ts | 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 |
---|---|
/environments | Folder containing configuration files for the build (dev mode vs production mode). |
environments.ts | Configuration file for development mode. |
environment.prod.ts | 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. |
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.