GrillPhil

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SpinnerComponent } from './spinner.component';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        SpinnerComponent

GrillPhil

<div class="spinner" [ngStyle]="{'margin': margin}">
  <div class="rect1" [ngStyle]="{'background-color': fill}"></div>
  <div class="rect2" [ngStyle]="{'background-color': fill}"></div>
  <div class="rect3" [ngStyle]="{'background-color': fill}"></div>
  <div class="rect4" [ngStyle]="{'background-color': fill}"></div>
  <div class="rect5" [ngStyle]="{'background-color': fill}"></div>
</div>

GrillPhil

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable()
export class BlockingProgressService {

    isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
    loadingMessage: BehaviorSubject<string> = new BehaviorSubject(null);

    constructor() { }

GrillPhil

<div class="blocking-loading-overlay" *ngIf="isLoading">
    <div>
        <app-spinner [fill]="'#aaa'" [margin]="'20px auto'"></app-spinner>
        <p>{{loadingMessage}}</p>
    </div>
</div>

GrillPhil

import { CommonModule } from '@angular/common';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { SpinnerModule } from '../../spinner/spinner.module';
import { BlockingProgressComponent } from './blocking-progress.component';
import { BlockingProgressService } from './blocking-progress.service';

@NgModule({
    imports: [
        CommonModule,
        SpinnerModule

GrillPhil

import { NgModule } from '@angular/core';
import { BlockingProgressModule } from './blocking-progress/blocking-progress.module';

@NgModule({
    imports: [
        ...
        BlockingProgressModule.forRoot(),
        ...
    ]
})

GrillPhil

import { NgModule } from '@angular/core';
import { BlockingProgressModule } from '../blocking-progress/blocking-progress.module';

@NgModule({
    imports: [
        ...
        BlockingProgressModule
    ]
})
export class ChildModule { }

GrillPhil

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

GrillPhil

<ul>
  <li><a [routerLink]="['/']">Home</a></li>
  <li><a [routerLink]="['/about']">About</a></li>
</ul>
<router-outlet></router-outlet>

GrillPhil

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA" stopProcessing="true">
          <match url="^(?!.*(.js|.css|.png|.jpg|.ico|.svg)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />