VicAv99

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';

VicAv99

@import '~@angular/material/theming';

@include mat-core();

$mat-primary: (
  50: #e8f8fd,
  100: #b9eaf9,
  200: #0e81a4,
  300: #0c6f8d,
  400: #0a5d76,

VicAv99

This documentation is meant to notate the build process starting from simply generating a project directory all the way to finishing with a full master detail application. This application is using the “Sparkle Stack”, which is best used in cases where a full application environment is needed (database to server to frontend). Before each step of the project below, a quick overview of technologies used will be described along with and links and references.

Root Directory

The root level of the application is meant as a container for our Frontend (client) and Backend (server) applications, however we also take advantage of this directory to define any workspace rules based on languages. More importantly, we compose Docker at this level.

Technologies:

• Makefile
• Docker
• editorconfig/prettier

VicAv99

// app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’;
import { BlockerInterceptor } from ‘./core/interceptors / blocker.interceptor’;
import { PizzaInterceptor } from ‘./core/interceptors / pizza.interceptor’;
…
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: BlockerInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: PizzaInterceptor, multi: true }
],

VicAv99

// src/core/interceptors/pizza.interceptor.ts

import { Injectable } from ‘@angular/core’;
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from ‘@angular/common/http’;

import { Observable } from ‘rxjs’;

@Injectable({
  providedIn: ‘root’
})

VicAv99

// app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’;
import { BlockerInterceptor } from ‘./core/interceptors/blocker.interceptor’;
…
providers: [
 { provide: HTTP_INTERCEPTORS, useClass: BlockerInterceptor, multi: true }
],
…

VicAv99

// src/core/interceptors/blocker.interceptor.ts

import { Injectable } from ‘@angular/core’;
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from ‘@angular/common/http’;
import { MatSnackBar } from ‘@angular/material’;

import { Observable } from ‘rxjs’;

@Injectable({
 providedIn: ‘root’

VicAv99

export interface HttpInterceptor {
  /**
   * * **req**: The outgoing request to handle
   * * **next**: The next interceptor in the chain, or the backend if no interceptors in the chain.
   *
   */
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
}

VicAv99

• Clone the repository: git clone https://github.com/VicAv99/http-interceptors.git
• cd into your cloned directory: cd http-interceptors
• Install dependencies: npm install 
• Start the application: npm start