Angular Structure

Overview

Index.html file Structure.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Steex - Angular 17 Responsive Admin Dashboard Template</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
</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';

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

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

const routes: Routes = [
    { path: '', component: LayoutComponent, loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule), canActivate: [AuthGuard] },
    { path: 'auth', loadChildren: () => import('./account/account.module').then(m => m.AccountModule)  },
    { path: 'pages', loadChildren: () => import('./extraspages/extraspages.module').then(m => m.ExtraspagesModule), canActivate: [AuthGuard] },
];

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

app.module.ts file Structure.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// auth
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
// Page Route
import { AppRoutingModule } from './app-routing.module';
import { LayoutsModule } from './layouts/layouts.module';
import { ToastrModule } from 'ngx-toastr';

// Laguage
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// Store
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
// component
import { AppComponent } from './app.component';
import { AuthlayoutComponent } from './authlayout/authlayout.component';
import { environment } from 'src/environments/environment';
import { AnalyticsEffects } from './store/Analytics/analytics.effects';
import { rootReducer } from './store';
import { fakebackendInterceptor } from './core/helpers/fake-backend';
import { ErrorInterceptor } from './core/helpers/error.interceptor';
import { JwtInterceptor } from './core/helpers/jwt.interceptor';
import { AuthenticationEffects } from './store/Authentication/authentication.effects';
import { initFirebaseBackend } from './authUtils';

export function createTranslateLoader(http: HttpClient): any {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
if (environment.defaultauth === 'firebase') {
  initFirebaseBackend(environment.firebaseConfig);
} else {
  fakebackendInterceptor;
}

@NgModule({
  declarations: [
    AppComponent,
    AuthlayoutComponent
  ],
  imports: [
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    StoreModule.forRoot(rootReducer),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),

    EffectsModule.forRoot([
      AuthenticationEffects,
    ]),
    AngularFireModule.initializeApp(environment.firebaseConfig),
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    LayoutsModule,
    ToastrModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    AngularFireAuthModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: fakebackendInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Layout setup

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

export const initialState: LayoutState = {
   LAYOUT: LAYOUT_TYPES.VERTICAL,
   LAYOUT_THEME: LAYOUT_THEME_TYPES.DEFAULT,
   LAYOUT_MODE: LAYOUT_MODE_TYPES.LIGHTMODE,
   LAYOUT_WIDTH: LAYOUT_WIDTH_TYPES.FIXED,
   LAYOUT_POSITION: LAYOUT_POSITION_TYPES.MEDIUM,
   TOPBAR: LAYOUT_TOPBAR_COLOR_TYPES.LIGHT,
   SIDEBAR_SIZE: LEFT_SIDEBAR_SIZE.DEFAULT,
   SIDEBAR_VIEW: LEFT_SIDEBAR_VIEW.DETACHED,
   SIDEBAR_COLOR: DATA_SIDEBAR_COLOR.DARK,
   SIDEBAR_IMAGE: DATA_SIDEBAR_IMAGE.NONE,
   DATA_PRELOADER: PERLOADER_TYPES.ENABLE
}

LAYOUT_TYPES	vertical,horizontal,two-column
LAYOUT_THEME_TYPES	light, dark
LAYOUT_MODE_TYPES	interaction, modern, minimal, creative, material, default
LAYOUT_WIDTH_TYPES	scrollable,fixed
LAYOUT_POSITION_TYPES	lg, md, sm,sm-hover
LAYOUT_TOPBAR_COLOR_TYPES	light, dark
LEFT_SIDEBAR_SIZE	lg, md, sm,sm-hover
LEFT_SIDEBAR_VIEW	Default, Datached
DATA_SIDEBAR_COLOR	light, dark, brand
DATA_SIDEBAR_IMAGE	one, two, three, four, none
PERLOADER_TYPES	disable, enable