Code Structure

Learn how this Angular project is structured and where are the files you need to modify.

Project structure
Angular project folder structure
In the root of the project we have the following important files and folders:
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.
​Now let's dive in the details of the /src folder.
/src
Inside of the /src directory we find our raw, uncompiled code. This is where most of the work for your Angular app will take place.
Project main files
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.
Note: testing is not implemented for this template. If you want to add testing check this guide.
src/app
The /app folder is the largest folder because it contains all the code of our Angular app. It has all the components, modules, pages, services and styles you will use to build your project.
This is the core of the project. Let’s have a look at the structure of this folder so you get an idea where to find things and where to add your own modules to adapt this project to your particular needs.
Pages, components, modules
We designed this Angular project with a modular approach.
We strive to showcase an advanced app module architecture so you get a better idea on how to structure and scale your project. Again, modules are great to achieve scalability.
Both /core and /shared folders include auxiliar modules that provide structure and organization to our source code and follow Angular best practices.

The other folders you will find inside /app are feature modules that include the different pages of the app.
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.
src/app/core
We will be expanding this documentation ASAP.
src/app/shared
We will be expanding this documentation ASAP.
src/assets
In this folder you will find sample images, sample-data json, and any other asset you may require in your project.
src/theme
Here you will find all the variables, mixins, shared styles, etc, that will make your app customizable and extendable.
Please read the Theming section for more information.

How to use this template?

Server Side Rendering

Last modified 3yr ago

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.

Code Structure

Project structure

`/src`

`src/app`

`src/app/core`

`src/app/shared`

`src/assets`

`src/theme`