refactor(whitelist and modules)!: change whitelist declaration

BREAKING CHANGE: whitelist now must be declared with .forRoot() in module
BREAKING CHANGES: remove router module for better management
BREAKING CHANGES: NgxProgressModule is now the old NgxProgressOnlyBarModule

README.md

@@ -32,13 +32,11 @@ yarn add @kken94/ngx-progress
 
 Choose the most suitable module for you.  
 
-There are four modules:  
-- **NgxProgressModule** (intercept both http requests and router changes)  
-- **NgxProgressOnlyHttpModule** (intercept only http requests)  
-- **NgxProgressOnlyRouterModule** (intercept only router changes)  
-- **NgxProgressOnlyBar** (manage progress bar by yourself)  
+There are two modules:  
+- **NgxProgressModule** (manage progress bar by yourself)  
+- **NgxProgressOnlyHttpModule** (import progress bar and intercept http requests)
 
-Import one of this in your **module.ts**
+Import one of this in your ***.module.ts**
 
 ```
 import { NgxProgressModule } from '@kken94/ngx-progress';
@@ -74,7 +72,18 @@ Overlay works with ```position:absolute```, ```top:0```, ```left:0```
 
 You can filter the HTTP requests that would like to be avoided by the interceptor by providing an array of regex patterns:
 ```
-  <ngx-progress [whitelist]="['auth', '[a-zA-Z]']"></ngx-progress>
+  import { NgxProgressHttpModule } from '@kken94/ngx-progress';
+  
+  @NgModule({
+    declarations: [AppComponent],
+    imports: [
+      ...
+      NgxProgressHttpModule.forRoot(['auth', '[a-zA-Z]']),
+      ...
+    ],
+    bootstrap: [AppComponent],
+  })
+  export class AppModule {}
 ```
 
 ## Configuration
@@ -123,6 +132,6 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
 
 ## Donate
 
-Offer me a coffee ☺
+Offer me a coffee 😁
 
 [![donate](donate.png)](https://paypal.me/nicolataddei)

projects/demo/src/app/app.component.html

@@ -91,7 +91,7 @@
     <div class="full-height" fxLayout="column" fxLayoutAlign="center center">
       <button mat-flat-button color="primary" style="margin-bottom: 1rem;" (click)="progress.start()"><span style="color: #ffffff;">Start</span></button>
       <button mat-flat-button color="primary" style="margin-bottom: 1rem;" (click)="progress.end()"><span style="color: #ffffff;">Complete</span></button>
-<!--      <button mat-flat-button color="accent" (click)="fakeRequest()"><span style="color: #ffffff;">Fake 3sec HTTP</span></button>-->
+      <button mat-flat-button color="accent" (click)="fakeRequest()"><span style="color: #ffffff;">Fake 3sec HTTP</span></button>
     </div>
   </div>
 </div>

projects/demo/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
@@ -11,8 +11,9 @@ import { MatSliderModule } from '@angular/material/slider';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ColorBlockModule } from 'ngx-color/block';
-import { NgxProgressOnlyHttpModule } from '../../../lib/src/lib/ngx-progress.module';
+import { NgxProgressModule } from '../../../lib/src/lib/ngx-progress.module';
 import { AppComponent } from './app.component';
+import { FakeHttpInterceptor } from './fake.interceptor';
 
 @NgModule({
   declarations: [AppComponent],
@@ -22,7 +23,7 @@ import { AppComponent } from './app.component';
     MatFormFieldModule,
     MatInputModule,
     FlexLayoutModule,
-    NgxProgressOnlyHttpModule,
+    NgxProgressModule,
     FormsModule,
     ColorBlockModule,
     MatSliderModule,
@@ -32,5 +33,12 @@ import { AppComponent } from './app.component';
     HttpClientModule,
   ],
   bootstrap: [AppComponent],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: FakeHttpInterceptor,
+      multi: true,
+    },
+  ],
 })
 export class AppModule {}

projects/demo/src/app/fake.interceptor.ts

@@ -1,13 +1,13 @@
 import {
-  HTTP_INTERCEPTORS,
   HttpEvent,
   HttpHandler,
   HttpInterceptor,
   HttpRequest,
   HttpResponse,
+  HTTP_INTERCEPTORS,
 } from '@angular/common/http';
-import { Observable, of } from 'rxjs';
 import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
 import { delay, dematerialize, materialize, mergeMap } from 'rxjs/operators';
 
 @Injectable()

projects/demo/tsconfig.app.json

@@ -15,4 +15,5 @@
     "src/test.ts",
     "src/**/*.spec.ts"
   ]
+
 }

projects/lib/src/lib/bar/bar.component.ts

@@ -12,7 +12,7 @@ export class BarComponent {
   @Input() color!: string;
   @Input() barHeight!: string;
   @Input() diameter!: string;
-  @Input() indeterminate!: string;
+  @Input() indeterminate!: boolean;
   // tslint:disable-next-line:variable-name
   _initialValue!: number;
   get initialValue(): number {

projects/lib/src/lib/ngx-progress.component.ts

@@ -8,10 +8,6 @@ import { RegisterService } from './register.service';
   styleUrls: ['ngx-progress.component.scss'],
 })
 export class NgxProgressComponent implements OnInit, OnDestroy {
-  /**
-   * String array with regex pattern to avoid loader on specified apis
-   */
-  @Input() whitelist: string[] = [];
   /**
    * Color of spinner and progress bar.
    *
@@ -70,7 +66,6 @@ export class NgxProgressComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.progressService.regexUrl = this.whitelist;
     this.register.registerBar(this.self);
   }
 }

projects/lib/src/lib/ngx-progress.interceptor.ts

@@ -5,20 +5,36 @@ import {
   HttpRequest,
   HttpResponse,
 } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { NgxProgressService } from './ngx-progress.service';
+import { WHITELIST } from './symbols';
 
 @Injectable()
 export class NgxProgressInterceptor implements HttpInterceptor {
-  constructor(private readonly progressService: NgxProgressService) {}
+  // tslint:disable-next-line:variable-name
+  _regexUrl: RegExp[] = [];
+  /**
+   * Is done the mapping from string to regex on variable assignment
+   * @param patterns: the whitelist
+   */
+  set regexUrl(patterns: string[]) {
+    this._regexUrl = patterns.map(p => new RegExp(p));
+  }
+
+  constructor(
+    private readonly progressService: NgxProgressService,
+    @Inject(WHITELIST) private readonly whitelist: string[],
+  ) {
+    this.regexUrl = whitelist;
+  }
 
   intercept(
     request: HttpRequest<any>,
     next: HttpHandler,
   ): Observable<HttpEvent<any>> {
-    for (const regexUrlItem of this.progressService._regexUrl) {
+    for (const regexUrlItem of this._regexUrl) {
       if (regexUrlItem.test(request.url)) {
         return next.handle(request);
       }

projects/lib/src/lib/ngx-progress.module.ts

@@ -1,71 +1,52 @@
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import {
-  NavigationCancel,
-  NavigationEnd,
-  NavigationError,
-  NavigationStart,
-  Router,
-  RouterModule,
-} from '@angular/router';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { BarModule } from './bar.module';
 import {
   ErrorInterceptor,
   NgxProgressInterceptor,
 } from './ngx-progress.interceptor';
-import { NgxProgressService } from './ngx-progress.service';
+import { WHITELIST } from './symbols';
 
 /***********************     HTTP ONLY         ************************/
 
+const HTTP_PROVIDERS = [
+  {
+    provide: HTTP_INTERCEPTORS,
+    useClass: NgxProgressInterceptor,
+    multi: true,
+  },
+  {
+    provide: HTTP_INTERCEPTORS,
+    useClass: ErrorInterceptor,
+    multi: true,
+  },
+];
+
 @NgModule({
   imports: [HttpClientModule, BarModule],
   exports: [HttpClientModule, BarModule],
   providers: [
+    ...HTTP_PROVIDERS,
     {
-      provide: HTTP_INTERCEPTORS,
-      useClass: NgxProgressInterceptor,
-      multi: true,
+      provide: WHITELIST,
+      useValue: [],
     },
-    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
   ],
 })
-export class NgxProgressOnlyHttpModule {}
-
-/********************     ROUTER NAVIGATION ONLY         *********************/
-
-@NgModule({
-  imports: [RouterModule, BarModule],
-  exports: [RouterModule, BarModule],
-})
-export class NgxProgressOnlyRouterModule {
-  constructor(
-    router: Router,
-    private readonly progressService: NgxProgressService,
-  ) {
-    initRouter(router, progressService);
-  }
-}
-
-/******************     HTTP AND ROUTER NAVIGATION         *******************/
-
-@NgModule({
-  imports: [HttpClientModule, RouterModule, BarModule],
-  exports: [HttpClientModule, RouterModule, BarModule],
-  providers: [
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: NgxProgressInterceptor,
-      multi: true,
-    },
-    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
-  ],
-})
-export class NgxProgressModule {
-  constructor(
-    router: Router,
-    private readonly progressService: NgxProgressService,
-  ) {
-    initRouter(router, progressService);
+export class NgxProgressHttpModule {
+  static forRoot(
+    whitelist: string[],
+  ): ModuleWithProviders<NgxProgressHttpModule> {
+    return {
+      ngModule: NgxProgressHttpModule,
+      providers: [
+        ...HTTP_PROVIDERS,
+        {
+          provide: WHITELIST,
+          useValue: whitelist,
+        },
+      ],
+    };
   }
 }
 
@@ -75,36 +56,4 @@ export class NgxProgressModule {
   imports: [BarModule],
   exports: [BarModule],
 })
-export class NgxProgressOnlyBarModule {}
-
-/*********************** methods          ************************/
-
-const getCurrentNavigationState = (router: Router) => {
-  const currentNavigation = router.getCurrentNavigation();
-  if (currentNavigation?.extras) {
-    return currentNavigation.extras.state;
-  }
-
-  return {};
-};
-
-const initRouter = (router: Router, progressService: NgxProgressService) => {
-  router.events.subscribe(event => {
-    const state = getCurrentNavigationState(router);
-    if (state && state.ignoreLoadingBar) {
-      return;
-    }
-
-    if (event instanceof NavigationStart) {
-      progressService.start();
-    }
-
-    if (
-      event instanceof NavigationError ||
-      event instanceof NavigationEnd ||
-      event instanceof NavigationCancel
-    ) {
-      progressService.end();
-    }
-  });
-};
+export class NgxProgressModule {}

projects/lib/src/lib/ngx-progress.service.ts

@@ -4,16 +4,6 @@ import { BarService } from './bar/bar.service';
 
 @Injectable({ providedIn: 'root' })
 export class NgxProgressService {
-  // tslint:disable-next-line:variable-name
-  _regexUrl: RegExp[] = [];
-  /**
-   * Is done the mapping from string to regex on variable assignment
-   * @param patterns: the whitelist
-   */
-  set regexUrl(patterns: string[]) {
-    this._regexUrl = patterns.map(p => new RegExp(p));
-  }
-
   private readonly endEmitter = new Subject();
   private readonly startEmitter = new Subject();
 

projects/lib/src/lib/symbols.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const WHITELIST = new InjectionToken('WHITELIST');

projects/lib/src/public-api.ts

@@ -1,9 +1,7 @@
 export { NgxProgressComponent } from './lib/ngx-progress.component';
 export {
+  NgxProgressHttpModule,
   NgxProgressModule,
-  NgxProgressOnlyHttpModule,
-  NgxProgressOnlyBarModule,
-  NgxProgressOnlyRouterModule,
 } from './lib/ngx-progress.module';
 export { NgxProgressService } from './lib/ngx-progress.service';
 export { BarModule } from './lib/bar.module';