Refactor the DI handling

mpalourdio · mpalourdio · commit ca14d02651ae · 2018-05-23T11:45:47.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,8 +3,11 @@
 ## v2.0.0
 
 The module bundling now uses [ng-packagr](https://github.com/dherges/ng-packagr).  
-The reason behind a new major release is because imports will break in existing codebases. 
-From now, you can/must simply use ``import { NgHttpLoaderModule } from 'ng-http-loader'`` without referencing the full path: they have changed, and this is the main reason a major release is introduced.
+From now, you must use ``import { xxxxxxx } from 'ng-http-loader'`` without referencing the full path.
+
+Also, ``NgHttpLoaderServicesModule`` && ``NgHttpLoaderComponentsModule`` have been removed and merged back to ``NgHttpLoaderModule``.  
+The ``injectables`` now take advantage of the new [Tree Shakable Providers features](https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4).  
+The integration in much cleaner, particularly with lazy loaded modules, and avoids the static ``forRoot()`` boilerplate. 
 
 ## v1.0.3
 
diff --git a/README.md b/README.md
@@ -36,8 +36,7 @@ From version **``1.0.0``**, the module is angular 6 / RxJS 6 compatible only.
 
 If you experience errors like below, **please double check the version you use.**
 
-``ERROR in Error: Metadata version mismatch for module [...]/angular/node_modules/ng-http-loader/ng-http-loader
-  .module.d.ts, found version x, expected y, resolving symbol AppModule in [...]/angular/src/app.module.ts``
+``ERROR in Error: Metadata version mismatch for module [...]/angular/node_modules/ng-http-loader/ng-http-loader.module.d.ts, found version x, expected y [...]``
 
 ## Requirements - HttpClientModule
 
@@ -72,33 +71,6 @@ import { NgHttpLoaderModule } from 'ng-http-loader'; <============
 export class AppModule { }
 ```
 
-or (splitted modules mode for more convenience)
-
-```typescript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-[...]
-import { AppComponent } from './app.component';
-import { HttpClientModule } from '@angular/common/http'; <============
-import { NgHttpLoaderComponentsModule } from 'ng-http-loader'; <============
-import { NgHttpLoaderServicesModule } from 'ng-http-loader'; <============
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    HttpClientModule, <============ (Perform http requests with this module)
-    NgHttpLoaderServicesModule, <============
-    NgHttpLoaderComponentsModule, <============
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
 In your app.component.html, simply add :
 ```xml
 <spinner></spinner>
@@ -131,7 +103,7 @@ export class AppComponent {
     [...]
 }
 ```
-The different spinners available are referenced in [this class](src/spinkits.ts).
+The different spinners available are referenced in [this class](src/lib/spinkits.ts).
 
 
 **_Otherwise, you can simply reference the chosen spinner as a simple string_**:
@@ -193,7 +165,7 @@ export class MyComponent {
 
 ## Misc
 
-Each Spinkit component defined in [SPINKIT_COMPONENTS](src/spinkits.ts#L30) can be used independently.
+Each Spinkit component defined in [SPINKIT_COMPONENTS](src/lib/spinkits.ts#L30) can be used independently.
 
 ## Credits
 
diff --git a/src/lib/components/ng-http-loader-components.module.ts b/src/lib/components/ng-http-loader-components.module.ts
diff --git a/src/lib/ng-http-loader.module.ts b/src/lib/ng-http-loader.module.ts
@@ -8,20 +8,28 @@
  */
 
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { NgHttpLoaderComponentsModule } from './components/ng-http-loader-components.module';
-import { NgHttpLoaderServicesModule } from './services/ng-http-loader-services.module';
+import { SpinnerComponent } from './components/spinner/spinner.component';
+import { PendingInterceptorServiceInterceptor } from './services/pending-interceptor.service';
+import { SPINKIT_COMPONENTS } from './spinkits';
 
 @NgModule({
+    declarations: [
+        SpinnerComponent,
+        SPINKIT_COMPONENTS,
+    ],
     imports: [
         CommonModule,
-        NgHttpLoaderComponentsModule,
-        NgHttpLoaderServicesModule,
+        HttpClientModule,
     ],
     exports: [
-        NgHttpLoaderComponentsModule,
-        NgHttpLoaderServicesModule,
+        SpinnerComponent,
+        SPINKIT_COMPONENTS,
     ],
+    providers: [
+        PendingInterceptorServiceInterceptor,
+    ]
 })
 export class NgHttpLoaderModule {
 }
diff --git a/src/lib/services/ng-http-loader-services.module.ts b/src/lib/services/ng-http-loader-services.module.ts
diff --git a/src/lib/services/pending-interceptor.service.ts b/src/lib/services/pending-interceptor.service.ts
@@ -7,12 +7,14 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { HTTP_INTERCEPTORS, 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';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class PendingInterceptorService implements HttpInterceptor {
     private _pendingRequests = 0;
     private _pendingRequestsStatus: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
@@ -71,3 +73,9 @@ export class PendingInterceptorService implements HttpInterceptor {
         );
     }
 }
+
+export const PendingInterceptorServiceInterceptor: ExistingProvider[] = [{
+    provide: HTTP_INTERCEPTORS,
+    useExisting: PendingInterceptorService,
+    multi: true
+}];
diff --git a/src/lib/services/spinner-visibility.service.ts b/src/lib/services/spinner-visibility.service.ts
@@ -11,7 +11,9 @@ import { Injectable } from '@angular/core';
 import { Observable, ReplaySubject } from 'rxjs';
 import { PendingInterceptorService } from './pending-interceptor.service';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class SpinnerVisibilityService {
     private _visibilitySubject: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
 
diff --git a/src/public_api.ts b/src/public_api.ts
@@ -11,11 +11,8 @@ export * from './lib/components/sk-three-bounce/sk-three-bounce.component';
 export * from './lib/components/sk-wandering-cubes/sk-wandering-cubes.component';
 export * from './lib/components/sk-wave/sk-wave.component';
 export * from './lib/components/spinner/spinner.component';
-
 export * from './lib/components/abstract.loader.component';
-export * from './lib/components/ng-http-loader-components.module';
 
-export * from './lib/services/ng-http-loader-services.module';
 export * from './lib/services/pending-interceptor.service';
 export * from './lib/services/spinner-visibility.service';
 
diff --git a/src/test/components/spinner/spinner.component.spec.ts b/src/test/components/spinner/spinner.component.spec.ts
@@ -13,7 +13,7 @@ import { async, ComponentFixture, discardPeriodicTasks, fakeAsync, inject, TestB
 import { By } from '@angular/platform-browser';
 import { forkJoin, Observable } from 'rxjs';
 import { SpinnerComponent } from '../../../lib/components/spinner/spinner.component';
-import { NgHttpLoaderServicesModule } from '../../../lib/services/ng-http-loader-services.module';
+import { PendingInterceptorServiceInterceptor } from '../../../lib/services/pending-interceptor.service';
 import { SpinnerVisibilityService } from '../../../lib/services/spinner-visibility.service';
 import { Spinkit, SPINKIT_COMPONENTS } from '../../../lib/spinkits';
 
@@ -24,7 +24,8 @@ describe('SpinnerComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [SpinnerComponent, SPINKIT_COMPONENTS],
-            imports: [NgHttpLoaderServicesModule, HttpClientTestingModule]
+            imports: [HttpClientTestingModule],
+            providers: [PendingInterceptorServiceInterceptor]
         })
             .compileComponents();
     }));
diff --git a/src/test/components/spinner/spinner.outlet.component.spec.ts b/src/test/components/spinner/spinner.outlet.component.spec.ts
@@ -13,7 +13,7 @@ import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { SkThreeBounceComponent } from '../../../lib/components/sk-three-bounce/sk-three-bounce.component';
 import { SpinnerComponent } from '../../../lib/components/spinner/spinner.component';
-import { NgHttpLoaderServicesModule } from '../../../lib/services/ng-http-loader-services.module';
+import { PendingInterceptorServiceInterceptor } from '../../../lib/services/pending-interceptor.service';
 import { SPINKIT_COMPONENTS } from '../../../lib/spinkits';
 
 describe('SpinnerNgOutletComponent', () => {
@@ -23,7 +23,8 @@ describe('SpinnerNgOutletComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [SpinnerComponent, SPINKIT_COMPONENTS],
-            imports: [NgHttpLoaderServicesModule, HttpClientTestingModule]
+            imports: [HttpClientTestingModule],
+            providers: [PendingInterceptorServiceInterceptor]
         })
             .overrideModule(BrowserDynamicTestingModule, {
                 set: {
diff --git a/src/test/ng-http-loader.module.spec.ts b/src/test/ng-http-loader.module.spec.ts
@@ -0,0 +1,22 @@
+/*
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { NgHttpLoaderModule } from '../lib/ng-http-loader.module';
+
+describe('NgHttpLoaderModule', () => {
+    let ngHttpLoaderModule: NgHttpLoaderModule;
+
+    beforeEach(() => {
+        ngHttpLoaderModule = new NgHttpLoaderModule();
+    });
+
+    it('should create an instance', () => {
+        expect(ngHttpLoaderModule).toBeTruthy();
+    });
+});
diff --git a/src/test/services/pending-interceptor.service.spec.ts b/src/test/services/pending-interceptor.service.spec.ts
@@ -7,24 +7,18 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { HTTP_INTERCEPTORS, HttpClient, HttpErrorResponse } from '@angular/common/http';
+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 } from '../../lib/services/pending-interceptor.service';
+import { PendingInterceptorService, PendingInterceptorServiceInterceptor } from '../../lib/services/pending-interceptor.service';
 
 describe('PendingInterceptorService', () => {
 
-    const PendingInterceptorServiceExistingProvider = {
-        provide: HTTP_INTERCEPTORS,
-        useExisting: PendingInterceptorService,
-        multi: true
-    };
-
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [HttpClientTestingModule],
-            providers: [PendingInterceptorService, PendingInterceptorServiceExistingProvider]
+            providers: [PendingInterceptorServiceInterceptor]
         });
     });
 
diff --git a/src/test/services/spinner-visibility.service.spec.ts b/src/test/services/spinner-visibility.service.spec.ts
@@ -8,17 +8,13 @@
  */
 
 import { inject, TestBed } from '@angular/core/testing';
-import { PendingInterceptorService } from '../../lib/services/pending-interceptor.service';
 import { SpinnerVisibilityService } from '../../lib/services/spinner-visibility.service';
 
 describe('SpinnerVisibilityService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            providers: [
-                SpinnerVisibilityService,
-                PendingInterceptorService,
-            ]
+            providers: [SpinnerVisibilityService]
         });
     });
 
