feat(core): remove the forRoot() in NgsRevealModule (no longer ne…

…eded with Angular 6)

BREAKING CHANGE: `NgsRevealModule.forRoot()` has been removed, and internally replaced by use of new `providedIn` option in `@Injectable`

Before:

```ts
import {NgsRevealModule} from 'ng-scrollreveal';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgsRevealModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

After:

```ts
import {NgsRevealModule} from 'ng-scrollreveal';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgsRevealModule],
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

README.md

@@ -42,15 +42,15 @@ npm install --save scrollreveal
 >**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.
 In your systemjs config file, `map` needs to tell the System loader where to look for `ng-scrollreveal`:
 
-```js
+```ts
 map: {
   'ng-scrollreveal': 'node_modules/ng-scrollreveal/bundles/ng-scrollreveal.min.js',
 }
 ```
 
 In your systemjs config file, `meta` needs to tell the System loader how to load `scrollreveal`:
 
-```js
+```ts
     meta: {
     './node_modules/scrollreveal/dist/scrollreveal.min.js': {
             format: 'amd'
@@ -77,44 +77,22 @@ npm install --save ng-scrollreveal
 
 Once installed you need to import the main module:
 
-```js
+```ts
 import {NgsRevealModule} from 'ng-scrollreveal';
 ```
 
-The only remaining part is to list the imported module in your application module. The exact method will be slightly
-different for the root (top-level) module for which you should end up with the code similar to (notice `NgsRevealModule.forRoot()`):
-
 ```ts
 import {NgsRevealModule} from 'ng-scrollreveal';
 
-// you can optionally provide a config, to change default options used by the directives
-const config:NgsRevealConfig = {
-    easing: 'cubic-bezier(0.2, 0, 0.5, 1)',
-    distance: '20px'
-}
-
 @NgModule({
   declarations: [AppComponent, ...],
-  imports: [NgsRevealModule.forRoot(config), ...],  
+  imports: [NgsRevealModule],  
   bootstrap: [AppComponent]
 })
 export class AppModule {
 }
 ```
 
-Other modules in your application can simply import `NgsRevealModule`:
-
-```js
-import {NgsRevealModule} from 'ng-scrollreveal';
-
-@NgModule({
-  declarations: [OtherComponent, ...],
-  imports: [NgsRevealModule, ...], 
-})
-export class OtherModule {
-}
-```
-
 ## Usage
 
 The library is composed of two main directives: `ngsReveal` and `ngsRevealSet`.
@@ -125,13 +103,13 @@ The library is composed of two main directives: `ngsReveal` and `ngsRevealSet`.
 
 Use this directive to reveal/hide a **single DOM element** upon scroll.
 
-##### Basic Usage:
+##### Basic Usage
 
 ```html
     <div class="item" ngsReveal>..</div>
 ```
 
-##### With Custom Options:
+##### With Custom Options
 
 You can also pass in a custom configuration object to the directive.
 
@@ -155,7 +133,7 @@ Use this directive to reveal/hide a **set of DOM elements** upon scroll.
 >**Note:** The value is a list of CSS selectors (comma-separated).
 
 
-#### Basic Usage:
+#### Basic Usage
 
 ```html
     <div class="itemset" ngsRevealSet [ngsSelector]="'.item'">
@@ -167,7 +145,7 @@ Use this directive to reveal/hide a **set of DOM elements** upon scroll.
     </div>
 ```
 
-#### With Custom Options:
+#### With Custom Options
 
 ```html
     <div class="itemset" [ngsRevealSet]="{ reset:true}" [ngsSelector]="'.item'">
@@ -181,7 +159,7 @@ Use this directive to reveal/hide a **set of DOM elements** upon scroll.
 
 Configuration options are the same as ScrollReveal JS [configuration object](https://github.com/jlmakes/scrollreveal#2-configuration). 
 
-#### Sequentially animated items:
+#### Sequentially animated items
 
 Child items inside the parent set can be sequentially animated, by adding the `[ngsRevealInterval]` attribute.
 
@@ -212,7 +190,7 @@ import {NgsRevealConfig} from 'ng-scrollreveal';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  providers: [NgbTabsetConfig] // add NgsRevealConfig to the component providers
+  providers: [NgsRevealConfig] // add NgsRevealConfig to the component providers
 })
 export class AppComponent {
   constructor(config: NgsRevealConfig) {
@@ -239,8 +217,7 @@ import { NgsRevealService } from 'ng-scrollreveal';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  providers: [NgbTabsetConfig] // add NgsRevealConfig to the component providers
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit, OnDestroy{
   constructor(private revealService: NgsRevealService) {

demo/src/app/home/home.module.ts

@@ -14,7 +14,7 @@ import { HomeComponent } from './home.component';
         FormsModule,
         HomeRoutingModule,
         NgbAccordionModule.forRoot(),
-        NgsRevealModule.forRoot()
+        NgsRevealModule
     ],
     declarations: [HomeComponent],
 })

src/directives/ngs-reveal-set.directive.spec.ts

@@ -30,7 +30,7 @@ describe('Directive: NgsRevealSetDirective', () => {
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      imports: [NgsRevealModule.forRoot()],
+      imports: [NgsRevealModule],
       declarations: [TestComponent]
     })
       .createComponent(TestComponent);

src/directives/ngs-reveal.directive.spec.ts

@@ -30,7 +30,7 @@ describe('Directive: NgsRevealDirective', () => {
 
     beforeEach(() => {
         fixture = TestBed.configureTestingModule({
-            imports: [NgsRevealModule.forRoot()],
+            imports: [NgsRevealModule],
             declarations: [TestComponent]
         })
             .createComponent(TestComponent);

src/ngs-reveal.module.ts

@@ -18,11 +18,4 @@ export { NgsRevealDirective, NgsRevealSetDirective } from './directives/index';
   declarations: [NgsRevealDirective, NgsRevealSetDirective]
 })
 export class NgsRevealModule {
-
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: NgsRevealModule,
-      providers: [WindowService, NgsRevealService, NgsRevealConfig]
-    };
-  }
 }

src/services/ngs-reveal-config.ts

@@ -5,7 +5,9 @@ import { Injectable } from '@angular/core';
  * You can inject this service, typically in your root component, and customize the values of its properties in
  * order to provide default values for all the ngsReveal directives used in the application.
  */
-@Injectable()
+@Injectable({
+    providedIn: 'root',
+})
 export class NgsRevealConfig {
 
     ///////////////////////

src/services/ngs-reveal.service.spec.ts

@@ -6,17 +6,20 @@ import { NgsRevealConfig } from './ngs-reveal-config';
 import { WindowService } from './window.service';
 
 describe('Service: NgsReveal', () => {
+  let service: NgsRevealService;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [NgsRevealConfig, NgsRevealService, WindowService]
     });
+    service = TestBed.get(NgsRevealService);
   });
 
-  it('should create the service instance...', inject([NgsRevealService], (service: NgsRevealService) => {
+  it('should create the service instance...', () => {
     expect(service).toBeTruthy();
-  }));
+  });
 
-  it('should set callbacks on provided config when calling init()', inject([NgsRevealService], (service: NgsRevealService) => {
+  it('should set callbacks on provided config when calling init()', () => {
 
     let config:NgsRevealConfig = { delay: 100};
 
@@ -26,9 +29,9 @@ describe('Service: NgsReveal', () => {
     expect(typeof (config.afterReveal)).toEqual('function');
     expect(typeof (config.beforeReset)).toEqual('function');
     expect(typeof (config.afterReset)).toEqual('function');
-  }));
+  });
 
-  it('should emit beforeReveal$ event when calling beforeReveal() callback', inject([NgsRevealService], (service: NgsRevealService) => {
+  it('should emit beforeReveal$ event when calling beforeReveal() callback', () => {
 
     let config:NgsRevealConfig = { delay: 100};
 
@@ -49,9 +52,9 @@ describe('Service: NgsReveal', () => {
     config.beforeReveal(dummyElement2);
 
     expect(calls).toEqual(2);
-  }));
+  });
 
-  it('should emit afterReveal$ event when calling afterReveal() callback', inject([NgsRevealService], (service: NgsRevealService) => {
+  it('should emit afterReveal$ event when calling afterReveal() callback', () => {
 
     let config:NgsRevealConfig = { delay: 100};
 
@@ -72,9 +75,9 @@ describe('Service: NgsReveal', () => {
     config.afterReveal(dummyElement2);
 
     expect(calls).toEqual(2);
-  }));
+  });
 
-  it('should emit beforeReset$ event when calling beforeReset() callback', inject([NgsRevealService], (service: NgsRevealService) => {
+  it('should emit beforeReset$ event when calling beforeReset() callback', () => {
 
     let config:NgsRevealConfig = { delay: 100};
 
@@ -95,9 +98,9 @@ describe('Service: NgsReveal', () => {
     config.beforeReset(dummyElement2);
 
     expect(calls).toEqual(2);
-  }));
+  });
 
-  it('should emit afterReset$ event when calling afterReset() callback', inject([NgsRevealService], (service: NgsRevealService) => {
+  it('should emit afterReset$ event when calling afterReset() callback', () => {
 
     let config:NgsRevealConfig = { delay: 100};
 
@@ -118,5 +121,5 @@ describe('Service: NgsReveal', () => {
     config.afterReset(dummyElement2);
 
     expect(calls).toEqual(2);
-  }));
+  });
 });

src/services/ngs-reveal.service.ts

@@ -69,7 +69,9 @@ export interface NgsHasScrollReveal {
  * It delegates the work to SR, when DOM manipulation is possible (i.e app is not running in a web worker for e.g).
  * If not possible, most methods simply do nothing, as DOM elements are not available anyway.
  */
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class NgsRevealService {
 
   // the Magic Maker !

src/services/window.service.ts

@@ -3,7 +3,9 @@ import { Injectable } from '@angular/core';
 /**
  * Service to interact with the window object.
  */
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class WindowService {
 
   get nativeWindow(): any {