Folder Structure | Tailwick - Admin & Dashboard Template

Angular Folder Structure

plugins //Extending Tailwind with reusable third-party plugins

src
- app
  
  assets
  
  environments
  
  favicon.ico
  
  index.html
  
  main.server.ts
  
  main.ts
  
  styles.scss

Angular file structure

Index.html file Structure.

<!doctype html>
<html lang="en" dir="ltr" class="light scroll-smooth group">
<head>
<meta charset="utf-8">
<title>Tailwick - Angular 17 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 class="text-base bg-body-bg text-body font-public dark:text-zink-100 dark:bg-zink-800 group-data-[skin=bordered]:bg-body-bordered group-data-[skin=bordered]:dark:bg-zink-700">
<app-root></app-root>
</body>
</html>

app.routes.ts file Structure.


import { Route, Routes } from '@angular/router';
import { LayoutComponent } from './layouts/layout/layout.component';

export const routes: Routes = [
{ path: '', component: LayoutComponent, loadChildren: () => import('./pages/pages.route').then(mod => mod.PAGE_ROUTES), canActivate: [AuthGuard] },
];

app.config.ts file Structure.


import { ApplicationConfig, importProvidersFrom, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideStore } from '@ngrx/store';
import { rootReducer } from './store';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule, provideHttpClient, withFetch } from '@angular/common/http';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { LucideAngularModule, icons } from 'lucide-angular';
import { provideEffects } from '@ngrx/effects';
import { EcommerceEffects } from './store/Ecommerce/ecommerce-effects';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { HRManagementEffects } from './store/HR/hr-effects';
import { provideEnvironmentNgxMask } from 'ngx-mask';
import { NotesEffects } from './store/Note/notes-effect';
import { SocialEffects } from './store/Social/social-effect';
import { UserEffects } from './store/User/user-effect';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarEffects } from './store/Calendar/calendar.effects';

// Auth
import { initFirebaseBackend } from './authUtils';

import { JwtInterceptor } from './core/helpers/jwt.interceptor';
import { ErrorInterceptor } from './core/helpers/error.interceptor';
import { FakeBackendInterceptor } from './core/helpers/fake-backend';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { environment } from '../environments/environment.prod';
import { AuthenticationEffects } from './store/Authentication/authentication.effects';
import { provideToastr } from 'ngx-toastr';

// required for AoT
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}

if (environment.defaultauth === 'firebase') {
initFirebaseBackend(environment.firebaseConfig);
} else {
FakeBackendInterceptor;
}

export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes),
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: FakeBackendInterceptor, multi: true },

provideClientHydration(),
provideStore(rootReducer),
provideEffects(EcommerceEffects, HRManagementEffects, NotesEffects, SocialEffects, UserEffects, CalendarEffects, AuthenticationEffects),
provideToastr({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: false,
}),
provideStoreDevtools(),
provideEnvironmentNgxMask(),
provideHttpClient(withFetch()),
{ provide: HTTP_INTERCEPTORS, useClass: FakeBackendInterceptor, multi: true },
TranslateService,
importProvidersFrom(
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
HttpClientModule,
BrowserAnimationsModule,
LucideAngularModule.pick(icons),
TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
)
]
};