Code Structure

File/Folder

Purpose

/e2e

This folder is where our end to end tests will live. This template doesn't include e2e tests, just the default configuration that is included in a new Angular project.

/node_modules

The npm packages installed in the project with the npm install command.

/src

The most important folder. Here we have all the files that make our Angular app and is the location where we will spend most of our time coding.

.editorconfig

Configuration for code editors. See EditorConfig.

.gitignore

Specifies intentionally untracked files that Git should ignore.

.huskyrc.json

Husky is a npm package that enable to run Git hooks easily. We specifically use it to lint our code (ng lint) before commiting and ensure the commit message follows the Angular Commit Convention rules. This file defines the git hooks to run.

angular.json

It provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. For details, see Angular Workspace Configuration.

browserslist

Under the hood, the Angular CLI uses Autoprefixer to add vendor prefixes when parsing CSS rules. This way we ensure compatibility with different browser and browser versions.

Internally, Autoprefixer relies on a library called Browserslist to figure out which browsers to support with prefixing. This file has the configuration for the supported browsers.

commitlint.config.js

To ensure code quality, we follow and enforce the Angular Commit Message Guidelines. These guidelines define a Commit Message Format and certain rules that will help teams achieve consistency with version control and source code management practices.

That's why we included the @commitlint/cli and @commitlint/config-angular npm packages and this config file that sets the linting rules (in our case Angular Commit Convention rules).

karma.conf.js

This is the Karma test runner configuration file. We use Karma to run our tests.

ng test command builds the app in watch mode, and launches the Karma test runner.

package-lock.json

Provides version information for all packages installed into node_modules by the npm client.

package.json

As every modern web application, we need a package system and package manager to handle all the third-party libraries and modules used by our app. Inside this file you will find all the dependencies and some other handy stuff like the npm scripts that will help us a lot to orchestrate the development (bundling/compiling) workflow.

server.ts

A super simple yet complete Node.js Express server to serve your Angular app with server side rendering support. Learn more about ssr in this project.

tsconfig.app.json

You may notice there are a few tsconfig.*.json files in any standard Angular project. They follow the same base + customization pattern.

The root tsconfig.json provides the base options that different config files derive from, and each specific tsconfig file provides specific options. This allows you to further customize the options from tsconfig.json.

In particular, this config file provides the options used when working with code in the app folder. This configuration file is referenced in the angular.json file.

tsconfig.json

Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration. This TypeScript configuration file guides the compiler as it generates JavaScript files for the project. This file contains options and flags that are essential for Angular applications. Keep in mind that this file needs to be in the root path as it’s where the TypeScript compiler will look for it.

tsconfig.server.json

Specific tsconfig options used when compiling the app for Server Side Rendering. This configuration file is referenced in the angular.json file.

tsconfig.spec.json

Specific tsconfig options used when compiling the tests for your app. This configuration file is referenced in the angular.json file.

tslint.json

tslint is a package that parses your Typescript code looking for points that don't follow best practice rules. This configuration file defines the set of rules for best practices in Typescript in general. In particular, all standard Angular projects created with the Angular CLI extend tslint rules from the codelyzer npm package. Every time you run ng lint these rules are enforced.

webpack.server.config.js

Default webpack config used by the Angular CLI build/bundling workflow.

File/Folder

Purpose

/app

Has all the components, modules, pages, services and styles you will use to build your project.

/assets

In this folder you will find sample images, sample-data json, and any other asset you may require in your project.

/environments

Under this folder are configuration files used by the Angular CLI to manage the different environment variables.

For example we could have different database configurations for both local and production environment.

/theme

It includes all the theming, variables and sass mixins to be used in our Angular project.

favicon.ico

The icon of our app.

index.html

This is the main entry point for the app. We won’t spend much of our time in this file as all the scripts (javascript) and styles (css) for our Angular app are dynamically injected in the compiled version of our index.html by the Angular compiler.

main.server.ts

Entry point for the Server Side Rendering environment.

main.ts

This is the entry point of your application, and is responsible of bootstrapping the application. As Angular can be bootstrapped in multiple environments we need to import a module specific to the environment. That's why we have both main.ts that loads the /app/app.module.ts and boots our Angular app in a browser environment.

platformBrowserDynamic().bootstrapModule(AppModule) And the main.server.ts that loads the /app/app.server.module.ts and boots our Angular app in a server environment.

polyfills.ts

When you create a project with the ng new command, a src/polyfills.ts configuration file is created as part of your project folder. This file incorporates the mandatory and many of the optional polyfills as JavaScript import statements.

For more information check Angular polyfills documentation.

test.ts

This file is required by ../karma.conf.js and loads recursively all the .spec files with tests and framework files.

tslint.json

Extends lint rules from ../tslint.json.

File/Folder

Purpose

/authentication

Feature module that includes /signin, /signup, and /forgot-password pages.

/charts

Feature module that includes different charting libraries examples grouped in three different pages (one for each charting library: charts.js, e-charts, and ngx-charts).

/components

Feature module that includes pages showcasing cards, lists, tabsets, carousels, etc.

/core

This folder contains the CoreModule. Unlike the SharedModule, this module gather all single-use classes and components.

/dashboards

Feature module that includes the main dashboards pages. One CRM Dashboard page and one E-commerce Dashboard page.

/forms

Feature module that includes many different form examples, layouts, pages, and functionalities.

/shared

The SharedModule that lives in this folder exists to hold the common components, directives, and pipes and share them with the modules that need them.

/shell

Shared module that includes a comprehensive set of App Shell components to add loading indications and placeholders to your app content. Read more about the importance of skeleton screens in our Improved UX with Skeleton Loading Screens post.

/tables

Feature module that includes many different tables, filters, pagination, sorting examples.

/utilities

Feature module that includes alerts, autocomplete, file-uploader, and modals pages with lots of examples.

app-color-palettes.ts

Config file with an interface to interact and set default color palette.

app-layouts.ts

Config file with an interface to interact and set default dynamic layout.

app-routing.module.ts

Here we define the main routes. Child routes of other lazy modules are defined inside those modules. These routes are registered to the Angular RouterModule in the AppModule.

app.component.html

This serves as the skeleton of the app. Typically has a <router-outlet> to render the routes and their content. It can also be wrapped with content that you want to be in every page (for example a footer).

In our case we have implemented a dynamic layout functionality so we are using those layouts to include headers, menus and footers that live in every page.

app.component.ts

It’s the Angular component that provides functionality to the html file I just mentioned above.

app.module.ts

This is the main module of the project.

app.server.module.ts

Similar to the previous one, this one wraps the main AppModule with stuff you only want in the server side rendered version of your app.

universal-interceptor.ts

Angular Http interceptor to ensure internal links work properly with Server Side Rendering.