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.