admin

Please wait...

folder App Folder Structure

account_tree Project Structure Overview

Below is the folder structure of the app folder in the starter template. Each folder serves a specific purpose in organizing the application.

folder main/
folder .angular
folder node_modules
folder src/
folder app/
folder authentication/
folder config/
folder core/
folder layout/
folder shared/
description app.component.html
description app.component.css
description app.component.spec.ts
description app.component.ts
description app.config.ts
description app.routes.ts
folder assets/
description .gitkeep
folder environments/
description environment.development.ts
description environment.ts
description index.html
description main.ts
description styles.scss
description .eslintrc.json
description angular.json
description package.json
description tsconfig.app.json
description tsconfig.json
description tsconfig.spec.json
info
Tip: Each module is designed to be self-contained with its own routing and components.

info Module Descriptions

  • layers
    Core Module

    Common services, models, and guards. Services are instantiated once.

  • dashboard
    Layout Module

    Layout components like header, sidebar, and footer.

  • share
    Shared Module

    Reusable components, directives, and pipes shared across features.

  • person
    Authentication Module

    Handles login, registration, password recovery, and session management.

  • perm_media
    Assets Folder

    Stores static resources such as images, fonts, and styles.

Core Folder

folder core/
folder guard/
folder interceptor/
folder models/
folder service/
description core.module.ts
Options Description
guard This folder is used for auth guard and import guard, you can find related files like auth.guard.ts & module-import.guard.ts here.
interceptor You can see interfeptor files here. You can see files for error and jwt interceptor, also find a file fake-backend.ts for dummy data.
models All enum and class files for USER, ROLE & CONFIG are install here.
service All singleton services are placed in service directory.

Layout Folder

folder layout/
folder app-layout/
folder header/
folder page-loader/
folder right-sidebar/
folder sidebar/
description layout.module.ts
Options Description
app-layout Used for Seperate authentication pages and main content pages. You can find two layout compent here auth-layout & main-layout.
header Header or navbar code is written here.
page-loader Loading spinner code is here, we used ngx-spinner for loading spinner.
right-sidebar Config sidebar code is written here.
sidebar You can find main sidebar menu code in this folder.

Folder Structure

Src Folder Structure

folder src/
folder app/
description app.component.html
description app.component.scss
description app.component.spec.ts
description app.component.ts
description app.config.ts
description app.routes.ts
folder assets/
description .gitkeep
folder environments/
description environment.development.ts
description environment.ts
description favicon.ico
description index.html
description main.ts
description styles.scss

root Folder Structure

folder main/
folder .angular
folder node_modules
folder src/...
description .editorconfig
description .eslintrc.json
description angular.json
description package.json
description tsconfig.app.json
description tsconfig.json
description tsconfig.spec.json

Scss Folder Structure

folder scss/
folder apps/
folder browser/
folder common/
folder components/
folder fonts/
folder pages/
folder plugins/
folder theme/
folder ui/
description style.scss