Application Structure and Modules

Application structure

Before we go ahead and modify our new Angular application, let’s take a quick tour of the application structure that the Angular CLI has put in place for us.

In the project root directory, we can find a tsconfig.json file, a package.json file, and an angular.json file, among others.

As a reminder:

• The tsconfig.json file will be used for TypeScript compilation options.
• The package.json file will be used to store the package dependencies we are using.
• The angular.json file is used for Angular-specific settings.

As an example, the "build" option specifies what stylesheets should be included, where the output path is, and the configuration options that are used when building production code, as opposed to development code. Interestingly, there are also options for linting, internationalization, unit testing, and end-to-end testing.

The Angular CLI will also create an src directory, and under this directory, an app, assets, and environments directory. The src/app directory contains the Angular components and modules that are used to build our application, and the assets directory is used for static content, such as images or fonts.

Within the src directory, let’s take a quick look at the index.html file that has been created for us: