Project Structure

Learn how we structured the code of Angular Admin Template

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

angular admin template code structure

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

• /node_modules

  • Where all the npm packages are installed when you run 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.

• angular-cli.json

  • Main configuration file for the Angular CLI.

• package.json

  • As every modern web application, we need a package system and package manager to handle all the third-party libraries and modules our app uses. 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.

• static.paths.ts

  • A list of routes used in your project so the Express server can properly handle 404 errors.

• tsconfig.json

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

We have already talked about the configuration for the workflow enough, now let's dive in the details of the /src folder.

src folder

src folder

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-cli.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-cli.json

App Folder

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.

app folder

Shared Folder

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.

shared folder

It imports the CommonModule because its component needs common directives. You will notice that It re-exports other modules. If you review the application, you may notice that many components requiring SharedModule directives also use NgIf and NgFor from CommonModule and bind to component properties with [(ngModel)], a directive in the 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.

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

In the Shared folder of this Angular Template you will find:

• Alerts Component

• Notifications Component

• Preload image Component

• File Uploader Directive

Core Folder

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 breadcrumbs, 404, navbars) that appear only in the AppComponent template. You don't import them elsewhere so they're not shared in that sense.

Only the root AppModule should import the CoreModule. Bad things happen if a lazy-loaded module imports it.

Styles folder

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

To gain in 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.

App 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.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.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 want only in the server versión of your app.