In the root of the project we have some important files and folders:
The npm packages installed in the project with the
npm install command.
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.
Main configuration file for the Angular CLI.
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.
A super simple yet complete Node.js Express server to serve your Angular app with server side rendering support.
A list of routes used in your project so the Express server can properly handle 404 errors.
Main configuration file, it needs to be in the root path as it’s where the typescript compiler will look for it.
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
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
Under this folder you will find the following important folders and files:
Has all the components, modules, pages, services and styles you will use to build your app.
In this folder you will find images, sample-data json’s, and any other asset you may require in your app.
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.
Has the files needed to bootstrap the app.
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).
This file extends
tsconfig.json main file and adds some specific configuration for the app. It’s then used in
This file extends
tsconfig.json main file and adds some specific configuration for the server. It’s then used in
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 (
SharedModule), three main folders that group different features, pages, and modules (
/user), and one auxiliar folder (
/misc) to group miscellaneous pages and stuff.
/app folder there are also some important files:
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).
It’s the Angular component that provides functionality to the html file I just mentioned about.
This is the main module of the project.
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
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.
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
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.
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
NgFor from Angular's
CommonModule and bind to component properties with
[(ngModel)], a directive in the Angular's
FormsModule. Modules that declare these components would have to import
/shared folder of this Angular Template you will find these components and directives:
A component that enables you to set background images with a loading indicator in an easy way.
This component enables you to have responsive images that maintain the aspect ratio you define.
This component enables you to define content containers that maintain it's aspect ratio across all the different screen sizes.
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.
A search bar input component.
Visualize the overall rating of a product in a beautiful way.
A component that customize and extends the UI of the
ngx-bootstrap carousel component.
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.
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.