Project Structure

Learn how we structured the code of Angular Site Template

If you are new to Angular development I suggest you read our article Angular Tutorial: Learn Angular from scratch step by step.

In the root of the project we have some important files and folders:

File/Folder	Purpose
node_modules/	The npm packages installed in the project with the npm install command.
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.
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.
angular.json	It provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Learn more about this file.
.gitignore	Specifies intentionally untracked files that Git should ignore.
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.
package-lock.json	Provides version information for all packages installed into node_modules by the npm client.
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.json	Default Typescript configuration file. It needs to be in the root path as it’s where the typescript compiler will look for it.
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.

When we start the scripts that handle the bundling/compilation workflow, our code inside of /src gets bundled and transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs.

Under this folder you will find the following important folders and files:

• /app

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

• /assets

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

• /environments

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

  • For example we could have a local database for our development environment and a product database for production environment.

  • When we run ng serve it will use by default the dev environment.

• /main

  • Has the files needed to bootstrap the app.

• index.html

  • You won’t be modifying this file often, as in our case it only serves as a placeholder. All the scripts and styles needed to make the app work are gonna be injected automatically by the webpack bundling process, so you don’t have to do this manually.

  • The only thing that comes to my mind now that you may include in this file are some meta tags (but you can also handle these through Angular as well).

• tsconfig.app.json

  • This file extends tsconfig.json main file and adds some specific configuration for the app. It’s then used in angular.json

• tsconfig.server.json

  • This file extends tsconfig.json main file and adds some specific configuration for the server. It’s then used in angular.json

/src/app

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.

We designed this 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.

The proposed architecture is based on two fundamental modules that are used across the app (CoreModule and SharedModule), three main folders that group different features, pages, and modules (/auth, /store and /user), and one auxiliar folder (/misc) to group miscellaneous pages and stuff.

If your project has a different set of functionalities (say for example a blog section), then you should add a new folder /blog which will include different pages and sub-modules for that set of features.

Inside the /app folder there are also some important files:

• 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).

• app.component.ts

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

• app.module.ts

  • This is the main module of the project.

• app.routes.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.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.

/src/app/core

This folder contains the CoreModule. Unlike the SharedModule, this module gather all single-use classes and components hiding their details inside a CoreModule that you import once when the app starts and never import anywhere else.

A simplified root AppModule imports CoreModule in its capacity as orchestrator of the application as a whole.

Under this module you should for example place singleton services like an AuthenticationService or other single-use components (such as 404, navbars. etc) that appear only in the AppComponent template. You don't import them elsewhere so they're not shared in that sense.

Following Angular best practices, only the root AppModule should import the CoreModule. Bad things happen if a lazy-loaded module imports it.

/src/app/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.

It imports the Angular CommonModule because the components inside this folder use common Angular directives. You will notice that it also re-exports other modules.

If you review the application structure, you may notice that many components requiring SharedModule directives also use NgIf and NgFor from Angular'sCommonModule and bind to component properties with [(ngModel)], a directive in the Angular's FormsModule. Modules that declare these components would have to import CommonModule, FormsModule, and SharedModule.

You can reduce the repetition by having SharedModule re-export CommonModule and FormsModule so that importers of SharedModule get CommonModule and FormsModule for free.

Notice that SharedModule can still export FormsModule without listing it among its imports.

In the /shared folder of this Angular Template you will find these components and directives:

• Background Image

  • A component that enables you to set background images with a loading indicator in an easy way.

• Preload Image

  • This component enables you to have responsive images that maintain the aspect ratio you define.

• Fill Container

  • This component enables you to define content containers that maintain it's aspect ratio across all the different screen sizes.

• Breadcrumbs

  • Add breadcrumbs in an easy and extensible way. You can add this component at the root app.component.html and it will be displayed in every page or you can add it in the specific pages and gain flexibility.

• Color Radio Buttons

  • A beautiful yet simple directive that extends ngx-bootstrap radio buttons and adds the capability to have actionable colored buttons instead of the typical radio button.

• Percentage Bar Rating

  • A component to visualize disaggregated ratings.

• Search Bar

  • A search bar input component.

• Star Rating

  • Visualize the overall rating of a product in a beautiful way.

• Stylish Carousel

  • A component that customize and extends the UI of the ngx-bootstrap carousel component.

/src/app/styles

Here you will find all the variables, mixins, shared styles, etc, that will make your app customizable and extendable.

Here is where you will change the main colors of the app to match your styles.

Maybe you don’t know Sass? Briefly, it is a superset of css that will ease and speed your development cycles incredibly.

Other folders (/auth, /store, /user, /misc)

To gain code modularity, and get the benefits of lazy loading modules, we’ve created a lazy module for each major section of the app.

Within those module folders you will find every related file for the pages included in that module. This includes the html for the layout, sass for the styles and the main page component.