Angular Folder Structure

Overview

Index.html file Structure.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title> Skote - Angular 21 Admin & Dashboard Template</title>

    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbvyBxmMbFhrzP9Z8moyYr6dCr-pzjhBE"></script>
</head>

<body>
    <app-root></app-root>
</body>

</html>


<!-- app.component.html file Structure. -->
<router-outlet></router-outlet>

app-routing.module.ts file Structure

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

//component
import { LayoutComponent } from './layouts/layout.component';

// Auth
import { AuthGuard } from './core/guards/auth.guard';

const routes: Routes = [
{ path: 'auth', loadChildren: () => import('./account/account.module').then(m => m.AccountModule) },
{ path: '', component: LayoutComponent, loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule), canActivate: [AuthGuard] },
{ path: 'pages', loadChildren: () => import('./extrapages/extrapages.module').then(m => m.ExtrapagesModule), canActivate: [AuthGuard] },
{ path: 'crypto-ico-landing', component: CyptolandingComponent },
{ path: '**', component: Page404Component },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

app.config.ts file Structure

import { NgModule } from '@angular/core';
import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { provideToastr } from 'ngx-toastr';
import { BsDropdownConfig } from 'ngx-bootstrap/dropdown';

import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';

import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

import { routes } from './app.routes';
import { rootReducer } from './store';

// Import the necessary effects
import { FilemanagerEffects } from './store/filemanager/filemanager.effects';
import { OrderEffects } from './store/orders/order.effects';
import { AuthenticationEffects } from './store/Authentication/authentication.effects';
import { CartEffects } from './store/Cart/cart.effects';
import { ProjectEffects } from './store/ProjectsData/project.effects';
import { usersEffects } from './store/UserGrid/user.effects';
import { userslistEffects } from './store/UserList/userlist.effect';
import { JoblistEffects } from './store/Job/job.effects';
import { CandidateEffects } from './store/Candidate/candidate.effects';
import { InvoiceDataEffects } from './store/Invoices/invoice.effects';
import { ChatEffects } from './store/Chat/chat.effect';
import { tasklistEffects } from './store/Tasks/tasks.effect';
import { OrdersEffects } from './store/Crypto/crypto.effects';
import { CustomerEffects } from './store/customer/customer.effects';
import { MailEffects } from './store/Email/email.effects';
import { TRANSLATE_HTTP_LOADER_CONFIG, TranslateHttpLoader } from '@ngx-translate/http-loader';
import { LanguageService } from './core/services/language.service';
import { provideFlatpickrDefaults } from 'angularx-flatpickr';
import { NgxEditorModule } from 'ngx-editor';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader();
}

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: TRANSLATE_HTTP_LOADER_CONFIG,
      useValue: {
        prefix: 'assets/i18n/',
        suffix: '.json'
      },
    },
    provideFlatpickrDefaults(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withInterceptorsFromDi()),
    provideAnimations(),
    provideToastr(),
    provideCharts(withDefaultRegisterables()),
    provideStore(rootReducer),
    importProvidersFrom(
      NgxEditorModule.forRoot({
        locals: {
          // menu
          bold: 'Bold',
          italic: 'Italic',
          code: 'Code',
          blockquote: 'Blockquote',
          underline: 'Underline',
          strike: 'Strike',
          bullet_list: 'Bullet List',
          ordered_list: 'Ordered List',
          heading: 'Heading',
          h1: 'Header 3',
          h2: 'Header 2',
          h3: 'Header 3',
          h4: 'Header 4',
          h5: 'Header 5',
          h6: 'Header 6',
          align_left: 'Left Align',
          align_center: 'Center Align',
          align_right: 'Right Align',
          align_justify: 'Justify',
          text_color: 'Text Color',
          background_color: 'Background Color',

          // popups, forms, others...
          url: 'URL',
          text: 'Text',
          openInNewTab: 'Open in new tab',
          insert: 'Insert',
          altText: 'Alt Text',
          title: 'Title',
          remove: 'Remove',
          enterValidUrl: 'Please enter a valid URL',
          required: 'This is required'
        },
      }),),
    provideEffects([
      FilemanagerEffects,
      OrderEffects,
      AuthenticationEffects,
      CartEffects,
      ProjectEffects,
      usersEffects,
      userslistEffects,
      JoblistEffects,
      CandidateEffects,
      InvoiceDataEffects,
      ChatEffects,
      tasklistEffects,
      OrdersEffects,
      CustomerEffects,
      MailEffects,
      LanguageService
    ]),

    // 🔑 CORRECTLY CONFIGURE TranslateModule using the imported function
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient],
        },
        defaultLanguage: 'en', // Set your default language
      })

    ),


    { provide: BsDropdownConfig, useValue: { isAnimated: true, autoClose: true } }
  ]
};

Layout setup

You can set the default layout in the src/app/store/layouts/layout-reducers.ts file. 

export const initialState: LayoutState = {
 LAYOUT_MODE: LAYOUT_MODE_TYPES.LIGHTMODE,
 DATA_LAYOUT: DATA_LAYOUT_MODE.VERTICAL,
 LAYOUT_WIDTH: LAYOUT_WIDTH_TYPES.FLUID,
 SIDEBAR_MODE: SIDEBAR_TYPE.DARK,
 TOPBAR_TYPE: TOPBAR_MODE_TYPES.DARK,
}
Layouts Types
LAYOUT_MODE_TYPES light,dark
DATA_LAYOUT_MODE horizontal,vertical
LAYOUT_WIDTH_TYPES Fixed , boxed, Scrollable
SIDEBAR_TYPE Light , Dark ,colored
TOPBAR_MODE_TYPES Light , Dark,colored
© Skote.