Merge pull request #131 from mpalourdio/ng9

Angular 9 migration

.travis.yml

@@ -19,7 +19,7 @@ script:
   - yarn lint
   - yarn audit
   - yarn test --code-coverage
-  - yarn build
+  - yarn build --prod
 
 after_script:
   - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v7.0.0
+- Added angular 9 support. 
+- BC break : `AbstractLoader` has been renamed to `AbstractLoaderDirective`. See [here](https://next.angular.io/guide/deprecations#undecorated-base-classes) and [here](https://angular.io/guide/styleguide#style-02-03).
+
 ## v6.0.1
 - The `rxjs` peer dependency is now `^6.5.0`, because the module uses the new `creation function partition observable` introduced in [v6.5.0](https://github.com/ReactiveX/rxjs/blob/f07d349da8c2e0dbddca17d33a9b4a1ceaf59354/CHANGELOG.md#650-2019-04-23).
 

README.md

@@ -35,7 +35,8 @@ The HTTP interceptor listens to all HTTP requests and shows a spinner / loader i
 | >=0.4.0 <1.0.0 | ^5.0.0             |
 | >=1.0.0 <3.2.0 | ^6.0.0             |
 | >=3.2.0 <5.1.0 | ^7.0.0             |
-| >=6.0.0        | ^8.0.0             |
+| >=6.0.0 <7.0.0 | ^8.0.0             |
+| >=7.0.0        | ^9.0.0             |
 
 If you experience errors like below, **please double check the version you use.**
 
@@ -105,6 +106,7 @@ You can customize the following parameters:
 **_To specify the spinner type this way, you must reference the `Spinkit` const as a public property in your app.component.ts_**:
 
 ```typescript
+import { Component } from '@angular/core'; 
 import { Spinkit } from 'ng-http-loader'; // <============
 
 @Component({
@@ -130,7 +132,7 @@ The different spinners available are referenced in [this file](src/lib/spinkits.
 You can define your own spinner component in place of the built-in ones. The needed steps are:
 
 - Create your component
-- Add it to the [entryComponents](https://angular.io/guide/ngmodule-faq#what-is-an-entry-component) array in your module's configuration
+- Add it to the [entryComponents](https://angular.io/guide/ngmodule-faq#what-is-an-entry-component) array in your module's configuration (not necessary anymore with [ivy](https://next.angular.io/guide/deprecations#entryComponents))
 - Reference your component as a public property in your `app.component.ts`
 - Reference the predefined property in the ng-http-loader component selector like this:
 ```xml
@@ -165,6 +167,7 @@ Sometimes, when manually showing the spinner, an HTTP request could be performed
 **For this reason, when calling `SpinnerVisibilityService#show()`, it prevents the HTTP interceptor from being triggered unless you explicitly call `SpinnerVisibilityService#hide()`.**
 
 ```typescript
+import { Component } from '@angular/core'; 
 import { SpinnerVisibilityService } from 'ng-http-loader';
 
 @Component({

angular.json

@@ -17,6 +17,11 @@
           "options": {
             "tsConfig": "./tsconfig.lib.json",
             "project": "./ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "./tsconfig.lib.prod.json"
+            }
           }
         },
         "test": {

package.json

@@ -1,13 +1,13 @@
 {
   "name": "ng-http-loader",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "scripts": {
     "ng": "ng",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "preversion": "yarn lint && yarn test",
-    "version": "yarn build",
+    "version": "yarn build --prod",
     "postversion": "git push && git push --tags"
   },
   "repository": {
@@ -26,6 +26,7 @@
     "ng6",
     "ng7",
     "ng8",
+    "ng9",
     "loader",
     "progressbar",
     "spinner",
@@ -37,46 +38,42 @@
     "url": "https://github.com/mpalourdio/ng-http-loader/issues"
   },
   "peerDependencies": {
-    "@angular/common": "^8.0.0",
-    "@angular/core": "^8.0.0",
-    "rxjs": "^6.5.0"
+    "@angular/common": "^9.0.0",
+    "@angular/core": "^9.0.0",
+    "rxjs": "^6.5.4",
+    "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.0",
-    "@angular-devkit/build-ng-packagr": "~0.803.0",
-    "@angular/cli": "^8.0.0",
-    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^8.0.0",
-    "@angular/compiler-cli": "^8.0.0",
-    "@angular/core": "^8.0.0",
-    "@angular/language-service": "^8.0.0",
-    "@angular/platform-browser": "^8.0.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
-    "@types/jasmine": "~3.3.8",
+    "@angular-devkit/build-angular": "~0.900.0",
+    "@angular-devkit/build-ng-packagr": "~0.900.0",
+    "@angular/cli": "^9.0.0",
+    "@angular/common": "^9.0.0",
+    "@angular/compiler": "^9.0.0",
+    "@angular/compiler-cli": "^9.0.0",
+    "@angular/core": "^9.0.0",
+    "@angular/language-service": "^9.0.0",
+    "@angular/platform-browser": "^9.0.0",
+    "@angular/platform-browser-dynamic": "^9.0.0",
+    "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "^5.0.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
     "coveralls": "^3.0.1",
-    "jasmine-core": "~3.4.0",
+    "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma": "~4.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "ng-packagr": "^5.3.0",
-    "rxjs": "^6.5.0",
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "ng-packagr": "^9.0.0",
+    "rxjs": "^6.5.4",
     "rxjs-tslint-rules": "^4.13.0",
-    "ts-node": "~7.0.0",
-    "tsickle": "^0.37.0",
+    "ts-node": "~8.3.0",
     "tslib": "^1.10.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.5.3",
-    "zone.js": "~0.9.1"
-  },
-  "engines": {
-    "node": ">= 8.9.0",
-    "npm": ">= 5.5.1"
+    "tslint": "~5.18.0",
+    "typescript": "~3.7.5",
+    "zone.js": "~0.10.2"
   }
 }

src/lib/components/abstract.loader.component.ts → src/lib/components/abstract.loader.directive.ts

@@ -7,9 +7,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Input } from '@angular/core';
+import { Input, Directive } from '@angular/core';
 
-export abstract class AbstractLoader {
+@Directive()
+export abstract class AbstractLoaderDirective {
 
     @Input() public backgroundColor: string;
 }

src/lib/components/sk-chasing-dots/sk-chasing-dots.component.ts

@@ -8,12 +8,12 @@
  */
 
 import { Component } from '@angular/core';
-import { AbstractLoader } from '../abstract.loader.component';
+import { AbstractLoaderDirective } from '../abstract.loader.directive';
 
 @Component({
     selector: 'sk-chasing-dots',
     templateUrl: './sk-chasing-dots.component.html',
     styleUrls: ['./sk-chasing-dots.component.scss']
 })
-export class SkChasingDotsComponent extends AbstractLoader {
+export class SkChasingDotsComponent extends AbstractLoaderDirective {
 }

src/lib/components/sk-cube-grid/sk-cube-grid.component.ts

@@ -8,12 +8,12 @@
  */
 
 import { Component } from '@angular/core';
-import { AbstractLoader } from '../abstract.loader.component';
+import { AbstractLoaderDirective } from '../abstract.loader.directive';
 
 @Component({
     selector: 'sk-cube-grid',
     templateUrl: './sk-cube-grid.component.html',
     styleUrls: ['./sk-cube-grid.component.scss']
 })
-export class SkCubeGridComponent extends AbstractLoader {
+export class SkCubeGridComponent extends AbstractLoaderDirective {
 }

src/lib/components/sk-double-bounce/sk-double-bounce.component.ts

@@ -8,12 +8,12 @@
  */
 
 import { Component } from '@angular/core';
-import { AbstractLoader } from '../abstract.loader.component';
+import { AbstractLoaderDirective } from '../abstract.loader.directive';
 
 @Component({
     selector: 'sk-double-bounce',
     templateUrl: './sk-double-bounce.component.html',
     styleUrls: ['./sk-double-bounce.component.scss']
 })
-export class SkDoubleBounceComponent extends AbstractLoader {
+export class SkDoubleBounceComponent extends AbstractLoaderDirective {
 }

src/lib/components/sk-rotating-plane/sk-rotating-plane.component.ts

@@ -8,12 +8,12 @@
  */
 
 import { Component } from '@angular/core';
-import { AbstractLoader } from '../abstract.loader.component';
+import { AbstractLoaderDirective } from '../abstract.loader.directive';
 
 @Component({
     selector: 'sk-rotating-plane',
     templateUrl: './sk-rotating-plane.component.html',
     styleUrls: ['./sk-rotating-plane.component.scss']
 })
-export class SkRotatingPlaneComponent extends AbstractLoader {
+export class SkRotatingPlaneComponent extends AbstractLoaderDirective {
 }

src/lib/components/sk-spinner-pulse/sk-spinner-pulse.component.ts

@@ -8,12 +8,12 @@
  */
 
 import { Component } from '@angular/core';
-import { AbstractLoader } from '../abstract.loader.component';
+import { AbstractLoaderDirective } from '../abstract.loader.directive';
 
 @Component({
     selector: 'sk-spinner-pulse',
     templateUrl: './sk-spinner-pulse.component.html',
     styleUrls: ['./sk-spinner-pulse.component.scss']
 })
-export class SkSpinnerPulseComponent extends AbstractLoader {
+export class SkSpinnerPulseComponent extends AbstractLoaderDirective {
 }

src/lib/components/sk-three-bounce/sk-three-bounce.component.ts

@@ -8,12 +8,12 @@
  */
 
 import { Component } from '@angular/core';
-import { AbstractLoader } from '../abstract.loader.component';
+import { AbstractLoaderDirective } from '../abstract.loader.directive';
 
 @Component({
     selector: 'sk-three-bounce',
     templateUrl: './sk-three-bounce.component.html',
     styleUrls: ['./sk-three-bounce.component.scss']
 })
-export class SkThreeBounceComponent extends AbstractLoader {
+export class SkThreeBounceComponent extends AbstractLoaderDirective {
 }

src/lib/components/sk-wandering-cubes/sk-wandering-cubes.component.ts

@@ -8,12 +8,12 @@
  */
 
 import { Component } from '@angular/core';
-import { AbstractLoader } from '../abstract.loader.component';
+import { AbstractLoaderDirective } from '../abstract.loader.directive';
 
 @Component({
     selector: 'sk-wandering-cubes',
     templateUrl: './sk-wandering-cubes.component.html',
     styleUrls: ['./sk-wandering-cubes.component.scss']
 })
-export class SkWanderingCubesComponent extends AbstractLoader {
+export class SkWanderingCubesComponent extends AbstractLoaderDirective {
 }

src/lib/components/sk-wave/sk-wave.component.ts

@@ -8,12 +8,12 @@
  */
 
 import { Component } from '@angular/core';
-import { AbstractLoader } from '../abstract.loader.component';
+import { AbstractLoaderDirective } from '../abstract.loader.directive';
 
 @Component({
     selector: 'sk-wave',
     templateUrl: './sk-wave.component.html',
     styleUrls: ['./sk-wave.component.scss']
 })
-export class SkWaveComponent extends AbstractLoader {
+export class SkWaveComponent extends AbstractLoaderDirective {
 }

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

@@ -27,7 +27,7 @@ import { SPINKIT_COMPONENTS } from './spinkits';
     ],
 })
 export class NgHttpLoaderModule {
-    public static forRoot(): ModuleWithProviders {
+    public static forRoot(): ModuleWithProviders<NgHttpLoaderModule> {
         return {
             ngModule: NgHttpLoaderModule,
             providers: [

src/public_api.ts

@@ -11,7 +11,7 @@ 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/ng-http-loader.component';
-export * from './lib/components/abstract.loader.component';
+export * from './lib/components/abstract.loader.directive';
 
 export * from './lib/services/pending-requests-interceptor.service';
 export * from './lib/services/spinner-visibility.service';

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

@@ -38,8 +38,8 @@ describe('NgHttpLoaderComponent OnPush', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(HostComponent);
         component = fixture.componentInstance;
-        http = TestBed.get(HttpClient);
-        httpMock = TestBed.get(HttpTestingController);
+        http = TestBed.inject(HttpClient);
+        httpMock = TestBed.inject(HttpTestingController);
         fixture.detectChanges();
     });
 

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

@@ -9,7 +9,6 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { of } from 'rxjs';
 import { NgHttpLoaderComponent } from '../../lib/components/ng-http-loader.component';
 import { SkThreeBounceComponent } from '../../lib/components/sk-three-bounce/sk-three-bounce.component';
@@ -23,9 +22,6 @@ describe('NgHttpLoaderComponentOutlet', () => {
         TestBed.configureTestingModule({
             declarations: [NgHttpLoaderComponent, ...SPINKIT_COMPONENTS],
         })
-            .overrideModule(BrowserDynamicTestingModule, {
-                set: { entryComponents: [SkThreeBounceComponent] }
-            })
             .compileComponents();
     }));
 

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

@@ -38,9 +38,9 @@ describe('NgHttpLoaderComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(NgHttpLoaderComponent);
         component = fixture.componentInstance;
-        http = TestBed.get(HttpClient);
-        httpMock = TestBed.get(HttpTestingController);
-        spinner = TestBed.get(SpinnerVisibilityService);
+        http = TestBed.inject(HttpClient);
+        httpMock = TestBed.inject(HttpTestingController);
+        spinner = TestBed.inject(SpinnerVisibilityService);
         isVisible = false;
         fixture.detectChanges();
         isVisibleSubscription = component.isVisible$.subscribe(v => isVisible = v);

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

@@ -27,9 +27,9 @@ describe('PendingRequestsInterceptor', () => {
             providers: [PendingRequestsInterceptorProvider]
         });
 
-        pendingRequestsInterceptor = TestBed.get(PendingRequestsInterceptor);
-        http = TestBed.get(HttpClient);
-        httpMock = TestBed.get(HttpTestingController);
+        pendingRequestsInterceptor = TestBed.inject(PendingRequestsInterceptor);
+        http = TestBed.inject(HttpClient);
+        httpMock = TestBed.inject(HttpTestingController);
     });
 
     it('should be created', () => {

src/test/services/spinner-visibility.service.spec.ts

@@ -15,7 +15,7 @@ describe('SpinnerVisibilityService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({});
-        spinnerVisibilityService = TestBed.get(SpinnerVisibilityService);
+        spinnerVisibilityService = TestBed.inject(SpinnerVisibilityService);
     });
 
     it('should be created', () => {

tsconfig.json

@@ -2,7 +2,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
+    "outDir": "./dist",
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,

tsconfig.lib.json

@@ -14,7 +14,6 @@
     ]
   },
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,