Merge pull request #72 from mpalourdio/ng-packagr

Fixes #35 #61 #67

Author: mpalourdio

.npmignore

@@ -1,5 +1,14 @@
 # Changelog
 
+## v2.0.0
+
+The module bundling now uses [ng-packagr](https://github.com/dherges/ng-packagr).  
+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
 
 Some compiler options have been reverted, so the compilation target is ``es5`` like before v1.0.2.

CHANGELOG.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 mpalourdio
+Copyright (c) 2018 mpalourdio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

LICENSE

@@ -17,7 +17,7 @@ Use the fork, Luke. PR without tests will likely not be merged.
 To install this library, run:
 
 ```bash
-$ npm install ng-http-loader --save
+$ npm install ng-http-loader --save / yarn add ng-http-loader
 ```
 
 ## What does it do ?
@@ -32,12 +32,11 @@ 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``**.
 
-From version **``1.0.0``**, the module is angular 6 / RxJS 6 compatible only.
+Versions **``1.0.0+``** and **``2.0.0+``** are 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
 
@@ -55,7 +54,7 @@ import { NgModule } from '@angular/core';
 [...]
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http'; <============
-import { NgHttpLoaderModule } from 'ng-http-loader/ng-http-loader.module'; <============
+import { NgHttpLoaderModule } from 'ng-http-loader'; <============
 
 @NgModule({
   declarations: [
@@ -72,33 +71,6 @@ import { NgHttpLoaderModule } from 'ng-http-loader/ng-http-loader.module'; <====
 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/components/ng-http-loader-components.module'; <============
-import { NgHttpLoaderServicesModule } from 'ng-http-loader/services/ng-http-loader-services.module'; <============
-
-@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>
@@ -119,7 +91,7 @@ You can customize the **background-color**, the **spinner type** and the **debou
 **_To use this syntax, you must reference the ``Spinkit`` const as a public property in your app.component.ts_**:
 
 ```typescript
-import { Spinkit } from 'ng-http-loader/spinkits'; <============
+import { Spinkit } from 'ng-http-loader'; <============
 
 @Component({
     selector: 'app-root',
@@ -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_**:
@@ -170,7 +142,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 { SpinnerVisibilityService } from 'ng-http-loader/services/spinner-visibility.service';
+import { SpinnerVisibilityService } from 'ng-http-loader';
 
 @Component({
     selector: 'my-component',
@@ -193,8 +165,9 @@ 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
 
-[Tobias Ahlin](https://github.com/tobiasahlin), the awesome creator of [SpinKit](https://github.com/tobiasahlin/SpinKit).
+[Tobias Ahlin](https://github.com/tobiasahlin), the awesome creator of [SpinKit](https://github.com/tobiasahlin/SpinKit).  
+[David Herges](https://github.com/dherges), the awesome developer of [ng-packagr](https://github.com/dherges/ng-packagr).

README.md

@@ -8,15 +8,34 @@
       "sourceRoot": "src",
       "projectType": "library",
       "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "./tsconfig.lib.json",
+            "project": "./ng-package.json"
+          }
+        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "./test.ts",
+            "main": "./src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "./polyfills.ts",
             "tsConfig": "./tsconfig.spec.json",
             "watch": false
           }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "./tsconfig.lib.json",
+              "./tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
         }
       }
     }

angular.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "./src/public_api.ts"
+  }
+}

gulpfile.js

@@ -1,9 +1,11 @@
 {
   "name": "ng-http-loader",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "scripts": {
-    "prepare-deploy": "gulp inline-templates && gulp clean-dist && ngc -p tsconfig.ngc.json && gulp clean-tmp && gulp copy-all",
-    "test": "ng test"
+    "ng": "ng",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint"
   },
   "repository": {
     "type": "git",
@@ -36,6 +38,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.6.0",
+    "@angular-devkit/build-ng-packagr": "~0.6.0",
     "@angular/cli": "^6.0.0",
     "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
@@ -49,9 +52,6 @@
     "@types/node": "~8.9.4",
     "codelyzer": "~4.2.1",
     "core-js": "^2.5.4",
-    "gulp": "^3.9.1",
-    "gulp-clean": "^0.3.2",
-    "gulp-inline-ng2-template": "^4.0.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~2.0.0",
@@ -60,10 +60,12 @@
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.4",
+    "ng-packagr": "^3.0.0-rc.5",
     "phantomjs-prebuilt": "^2.1.14",
-    "protractor": "~5.3.0",
     "rxjs": "^6.0.0",
     "ts-node": "~5.0.1",
+    "tsickle": ">=0.25.5",
+    "tslib": "^1.9.0",
     "tslint": "~5.9.1",
     "typescript": "~2.7.2",
     "zone.js": "^0.8.26"