Merge c34ce4a into 2410b65

CHANGELOG.md

@@ -1,15 +1,24 @@
 # Changelog
 
+## v4.0.0
+- `HttpClientModule` has been removed from imports.  
+This caused some issues when external modules were imported in an application, and those modules registered their own HTTP interceptors. See [this issue](https://github.com/angular/angular/issues/20575) for reference.
+
+- A static `forRoot()` method has been added to the module declaration. You must now [explicitly call this method](README.md#usage) when importing `NgHttpLoaderModule` in your root application module.
+This intends to avoid multiple providers instances when working with lazy modules in which you would want to import `NgHttpLoaderModule` again for any reason.
+
+- The default spinner is now `Spinkit.skWave` (less CPU intensive). 
+
 ## v3.2.0
 
 `peerDependencies` section now targets `angular 7`. The module is still `angular 6` compatible, so this is not a major release.  
 Users are still encouraged to upgrade their applications ASAP.
 
 ## v3.1.2
 
-Added [browserslist](https://github.com/browserslist/browserslist) support.  
-Some cleanup has been done in CSS files to let the CSS auto-prefixer do the job automatically regarding supported browsers.  
-Spinkit CSS integration has been been replaced by SCSS.
+- Added [browserslist](https://github.com/browserslist/browserslist) support.  
+- Some cleanup has been done in CSS files to let the CSS auto-prefixer do the job automatically regarding supported browsers.  
+- Spinkit CSS integration has been been replaced by SCSS.
 
 ## v3.1.1
 

README.md

@@ -33,7 +33,8 @@ If you want to use Angular 5, use versions **`0.4.0`** and above.
 
 The latest compatible version with angular 5 is version [**`0.9.1`**](https://github.com/mpalourdio/ng-http-loader/tree/0.9.1).
 
-Versions **`1.0.0+`**, **`2.0.0+`** and **`3.0.0+`** are angular 6 & 7 / RxJS 6 compatible only.
+Versions **`1.0.0+`**, **`2.0.0+`** and **`3.0.0+`** are angular 6 & 7 / RxJS 6 compatible only.  
+Versions **`4.0.0+`** is meant to be angular 7 compatible only.
 
 If you experience errors like below, **please double check the version you use.**
 
@@ -64,7 +65,7 @@ import { NgHttpLoaderModule } from 'ng-http-loader'; // <============
   imports: [
     BrowserModule,
     HttpClientModule, // <============ (Perform HTTP requests with this module)
-    NgHttpLoaderModule, // <============
+    NgHttpLoaderModule.forRoot(), // <============
   ],
   providers: [],
   bootstrap: [AppComponent]

package.json

@@ -6,7 +6,7 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "preversion": "yarn test",
+    "preversion": "yarn lint && yarn test",
     "version": "yarn build",
     "postversion": "git push && git push --tags"
   },
@@ -36,21 +36,21 @@
     "url": "https://github.com/mpalourdio/ng-http-loader/issues"
   },
   "peerDependencies": {
-    "@angular/common": "~7.0.0",
-    "@angular/core": "~7.0.0",
+    "@angular/common": "^7.0.0",
+    "@angular/core": "^7.0.0",
     "rxjs": "~6.3.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.10.0",
     "@angular-devkit/build-ng-packagr": "~0.10.0",
-    "@angular/cli": "~7.0.1",
-    "@angular/common": "~7.0.0",
-    "@angular/compiler": "~7.0.0",
-    "@angular/compiler-cli": "~7.0.0",
-    "@angular/core": "~7.0.0",
-    "@angular/language-service": "~7.0.0",
-    "@angular/platform-browser": "~7.0.0",
-    "@angular/platform-browser-dynamic": "~7.0.0",
+    "@angular/cli": "~7.0.5",
+    "@angular/common": "^7.0.0",
+    "@angular/compiler": "^7.0.0",
+    "@angular/compiler-cli": "^7.0.0",
+    "@angular/core": "^7.0.0",
+    "@angular/language-service": "^7.0.0",
+    "@angular/platform-browser": "^7.0.0",
+    "@angular/platform-browser-dynamic": "^7.0.0",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
@@ -68,7 +68,7 @@
     "ng-packagr": "^4.2.0",
     "rxjs": "~6.3.3",
     "ts-node": "~7.0.0",
-    "tsickle": ">=0.29.0",
+    "tsickle": ">=0.34.0",
     "tslib": "^1.9.0",
     "tslint": "~5.11.0",
     "typescript": "~3.1.6",

src/lib/components/ng-http-loader.component.ts

@@ -23,12 +23,12 @@ export class NgHttpLoaderComponent implements OnDestroy, OnInit {
     public isSpinnerVisible: boolean;
     public spinkit = Spinkit;
     private subscriptions: Subscription;
-    private visibleUntil: number = Date.now();
+    private visibleUntil = Date.now();
 
     @Input()
     public backgroundColor: string;
     @Input()
-    public spinner = Spinkit.skCubeGrid;
+    public spinner = Spinkit.skWave;
     @Input()
     public filteredUrlPatterns: string[] = [];
     @Input()

src/lib/ng-http-loader.module.ts

@@ -8,8 +8,7 @@
  */
 
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { NgHttpLoaderComponent } from './components/ng-http-loader.component';
 import { PendingInterceptorServiceInterceptor } from './services/pending-interceptor.service';
 import { SPINKIT_COMPONENTS } from './spinkits';
@@ -21,15 +20,19 @@ import { SPINKIT_COMPONENTS } from './spinkits';
     ],
     imports: [
         CommonModule,
-        HttpClientModule,
     ],
     exports: [
         NgHttpLoaderComponent,
         ...SPINKIT_COMPONENTS,
     ],
-    providers: [
-        PendingInterceptorServiceInterceptor,
-    ]
 })
 export class NgHttpLoaderModule {
+    static forRoot(): ModuleWithProviders {
+        return {
+            ngModule: NgHttpLoaderModule,
+            providers: [
+                PendingInterceptorServiceInterceptor,
+            ]
+        };
+    }
 }

src/lib/services/pending-interceptor.service.ts

@@ -7,7 +7,14 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { HTTP_INTERCEPTORS, HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import {
+    HTTP_INTERCEPTORS,
+    HttpErrorResponse,
+    HttpEvent,
+    HttpHandler,
+    HttpInterceptor,
+    HttpRequest
+} from '@angular/common/http';
 import { ExistingProvider, Injectable } from '@angular/core';
 import { Observable, ReplaySubject, throwError } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';

src/lib/services/spinner-visibility.service.ts

@@ -15,7 +15,7 @@ import { PendingInterceptorService } from './pending-interceptor.service';
     providedIn: 'root'
 })
 export class SpinnerVisibilityService {
-    private _visibilitySubject: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
+    private _visibilitySubject = new ReplaySubject<boolean>(1);
 
     constructor(private pendingInterceptorService: PendingInterceptorService) {
     }

src/test/components/ng-http-loader.component.spec.ts

@@ -52,10 +52,10 @@ describe('NgHttpLoaderComponent', () => {
 
         const element = fixture
             .debugElement
-            .query(By.css('.sk-cube-grid'))
+            .query(By.css('.sk-wave'))
             .nativeElement;
 
-        expect(element.className).toBe('sk-cube-grid colored');
+        expect(element.className).toBe('sk-wave colored');
     });
 
     it('should destroy ng-http-loader as a view dependency without error', () => {
@@ -78,10 +78,10 @@ describe('NgHttpLoaderComponent', () => {
 
         const element = fixture
             .debugElement
-            .query(By.css('.sk-cube-grid'))
+            .query(By.css('.sk-wave'))
             .nativeElement;
 
-        expect(element.className).toBe('sk-cube-grid');
+        expect(element.className).toBe('sk-wave');
     });
 
     it('should not display anything by default', () => {
@@ -112,7 +112,7 @@ describe('NgHttpLoaderComponent', () => {
 
         const element = fixture
             .debugElement
-            .query(By.css('.sk-cube.sk-cube1'))
+            .query(By.css('.sk-rect.sk-rect1'))
             .nativeElement;
 
         expect(element.style['background-color']).toBe('rgb(255, 0, 0)');

src/test/ng-http-loader.module.spec.ts

@@ -19,4 +19,9 @@ describe('NgHttpLoaderModule', () => {
     it('should create an instance', () => {
         expect(ngHttpLoaderModule).toBeTruthy();
     });
+
+    it('should work with forRoot', () => {
+        const moduleWithProviders = NgHttpLoaderModule.forRoot();
+        expect(moduleWithProviders).toBeTruthy();
+    });
 });

src/test/services/pending-interceptor.service.spec.ts

@@ -11,7 +11,10 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { async, inject, TestBed } from '@angular/core/testing';
 import { forkJoin, Observable } from 'rxjs';
-import { PendingInterceptorService, PendingInterceptorServiceInterceptor } from '../../lib/services/pending-interceptor.service';
+import {
+    PendingInterceptorService,
+    PendingInterceptorServiceInterceptor
+} from '../../lib/services/pending-interceptor.service';
 
 describe('PendingInterceptorService', () => {