admin

Please wait...

App Folder Structure

You can see following folder structure of app folder in starter template.

                                
main/
├── .angular
├── node_modules
├── src/
|   ├── app/
|   |   ├── core/
|   |   ├── layout/
|   |   ├── modules/
|   |   ├── shared/
|   |   ├── app.component.html
|   |   ├── app.componentscss
|   |   ├── app.component.spec.ts
|   |   ├── app.component.ts
|   |   ├── app.config.ts
|   ├── assets/
|   |   └── .gitkeep
|   ├── index.html
|   ├── main.server.ts
|   ├── main.ts
|   ├── styles.scss
├── .editorconfig
├── .gitignore
├── angular.json
├── eslint.config.js
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
Folder Description
core The Core Module is a module we create to define common services, models, interceptor and guard. The services defined in the core module are instantiated once. For more details please scroll down.
layout You can find layout related modules here like header, sidebar, customizer etc.
modules You can find application all modules and pages here.
shared We create it to define common components and other modules that we need to import inside every other module of our application, so you do not need to import them again and again (like the Material Components). We only need to add the Shared module to each module to access to common components.

Core Folder

                                        
core/
├── guard/
├── interceptor/
├── models/
├── service/
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 token interceptor.
models All enum and class files for USER, SETTINGS are install here.
service All singleton services are placed in service directory.

Layout Folder

                                        
layout/
├── admin-layout/
├── auth-layout/
├── customizer/
├── footer/
├── header/
├── sidebar/
├── sidebar-notice/
├── sidemenu/
├── topmenu/
├── widgets
Options Description
admin-layout & auth-layout Used for Seperate authentication pages and main content or admin pages.
customizer This module is used for layout customization like theme, sidebar, topbar, LTR & RTL etc.
footer Footer module for branding.
header Header or Navbar module for template header.
sidebar Main sidebar layout which include user details and sidebar menu.
sidebar-notice Notification sidebar menu used for events and settings.
sidemenu Sidemenu module for pages router links.
topmenu All page router links when top layout is enabled.
widgets Widgets for userpanel, notification, logo etc.

Folder Structure

Src Folder Structure

                                
src/
├── app/
|   ├── app.component.html
|   ├── app.componentscss
|   ├── app.component.spec.ts
|   ├── app.component.ts
|   └── app.config.ts
├── assets/
|   └── .gitkeep
├── index.html
├── main.server.ts
├── main.ts
├── styles.scss

root Folder Structure

                                
main/
├── .angular
├── node_modules
├── src/...
├── .editorconfig
├── angular.json
├── .eslint.config.json
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json

Styles Folder Structure

                                
styles/
├── custom/
├── grid/
├── helpers/
├── layout/
├── material/
├── plugins/
├── _layout-themes.scss
├── _themes.scss
├── custom-themes.scss