Angular Folder Structure
Overview
Index.html file Structure.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Skote - angular 18 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.module.ts file Structure
import { NgModule } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from '../environments/environment';
// Swiper Slider
import { SlickCarouselModule } from 'ngx-slick-carousel';
// bootstrap component
import { TabsModule } from 'ngx-bootstrap/tabs';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { ToastrModule } from 'ngx-toastr';
import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
import { SharedModule } from './cyptolanding/shared/shared.module';
// Store
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';
// Page Route
import { ExtrapagesModule } from './extrapages/extrapages.module';
import { LayoutsModule } from './layouts/layouts.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { initFirebaseBackend } from './authUtils';
import { CyptolandingComponent } from './cyptolanding/cyptolanding.component';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
// Auth
import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { ErrorInterceptor } from './core/helpers/error.interceptor';
import { JwtInterceptor } from './core/helpers/jwt.interceptor';
import { FakeBackendInterceptor } from './core/helpers/fake-backend';
import { FilemanagerEffects } from './store/filemanager/filemanager.effects';
import { rootReducer } from './store';
import { OrderEffects } from './store/orders/order.effects';
import { AuthenticationEffects } from './store/Authentication/authentication.effects';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
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';
if (environment.defaultauth === 'firebase') {
initFirebaseBackend(environment.firebaseConfig);
} else {
// tslint:disable-next-line: no-unused-expression
FakeBackendInterceptor;
}
export function createTranslateLoader(http: HttpClient): any {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent,
CyptolandingComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
}),
LayoutsModule,
AppRoutingModule,
ExtrapagesModule,
AccordionModule.forRoot(),
TabsModule.forRoot(),
TooltipModule.forRoot(),
SharedModule,
ScrollToModule.forRoot(),
SlickCarouselModule,
ToastrModule.forRoot(),
StoreModule.forRoot(rootReducer),
StoreDevtoolsModule.instrument({
maxAge: 25, // Retains last 25 states
logOnly: environment.production, // Restrict extension to log-only mode
}),
EffectsModule.forRoot([
AuthenticationEffects,
]),
],
bootstrap: [AppComponent],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: FakeBackendInterceptor, multi: true },
],
})
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_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 |