Angular CLI project structure 1

In this video we will discuss the Angular project structure. I have split this into 2 videos. In this video, we will discuss all the files and folders in the Angular project, except the “src” folder and it’s contents. In our next video we will discuss the “src” folder and it’s contents.

One of the easiest ways to create a working angular project, is by using the Angular CLI. The following Angular CLI command creates a working Angular Project out of the box
ng new AngularProject

As you can see there are several files in the project. The table below shows the purpose of each file/folder.

package.json : This file contains the packages to build and run our application. It contains two sets of packages, dependencies and devDependencies. The dependencies are essential for running the application. The devDependencies are only required to develop the application. These packages are installed into the node_modules folder by the Node Package Manager (npm), when npm install commaned is excuted. You can also add your own custom scripts here.

“scripts” property in package.json file contains the useful npm commands. Notice we have “start”: “ng serve”. This means when we execute npm start it executes ng serve which builds and starts the server. In addition if you also want to launch the browser and open the application
CHANGE “start”: “ng serve” TO “start”: “ng serve –open”.

node_modules : The packages specified in package.json file are installed into this folder when we run npm install command

e2e Folder : Contains end-to-end tests and their configuration files. We will discuss end-to-end tests in our upcoming videos.

.angular-cli.json : This is the Angular CLI configuration file. We discussed the use of this file in our previous video.

.editorconfig : Configuration file for Visual Studio Code. The settings in this file let you set certain code style guidelines. For example what indent_style do you want – spaces or tabs and what should be the indent size etc. You can share this editorconfig file with other developers to maintain consistent coding styles. To read more about editor configuration please visit

.gitignore : This file is used to determine files and folders you don’t want to check in to source control. For example one of the folders we do not want to check in to source control is /dist folder which is auto generated when we build the application. So this folder is listed in this file. So, all the files and folders listed in this file are ignored, when a change set is checked in to source control.

karma.conf.js : Karma is the unit test runner for angular applications. As the name implies, karma.conf.js is the configuration file for Karma.

protractor.conf.js : Protractor is an end-to-end test framework for Angular applications. As the name implies, protractor.conf.js is the configuration file for Protractor.

README.md : This is a README file which contains the commonly used Angular CLI commands out of the box. You may enhance it with your own project documentation so that anyone checking out the repo knows the commands to use to build, run and test your app.

tsconfig.json : This is the TypeScript compiler configuration file. This file has several TypeScript compiler configuration settings. For example, to compile TypeScript to JavaScript on saving a TypeScript file set compileOnSave setting to true. If you do not want .map files to be generated, set sourceMap to false. .map files are used for debugging your application.

tslint.json – Angular has a linting tool that checks our TypeScript code for programmatic and stylistic errors as well as non-adherence to coding standards and conventions. tslint.json is the configuration file for linting. We will discuss the settings in this file when we discuss linting in our upcoming videos.

In our next video we will discuss the “src” folder and it’s contents.

Text version of the video

Slides

Angular CLI Text articles & Slides

Angular CLI Tutorial

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

Nguồn: https://ftlinuxcourse.com

Xem thêm bài viết khác: https://ftlinuxcourse.com/cong-nghe