feat(ng5-upgrade): Updated officially to Angular5

Updated demo using an Angular5 app utilizing `ngx-device-detector` 's latest release.
Added docs

.travis.yml

@@ -25,7 +25,7 @@ script:
   - yarn
   - node_modules/.bin/ng test --watch false
   - node_modules/.bin/webdriver-manager update
-  - ng build -bh "https://koderlabs.github.io/ng2-device-detector/" --prod --aot
+  - ng build -bh "https://koderlabs.github.io/ngx-device-detector/" --prod --aot
   - cd ..
 
 deploy:

.yo-rc.json

@@ -1,7 +1,7 @@
 {
   "generator-angular2-library": {
     "promptValues": {
-      "gitRepositoryUrl": "https://github.com/AhsanAyaz/ng2-device-detector.git"
+      "gitRepositoryUrl": "https://github.com/AhsanAyaz/ngx-device-detector.git"
     }
   }
 }

CONTRIBUTING.md

@@ -34,10 +34,10 @@ It means a lot that you took time out to improve this package and contribute bac
 
 ### Relevant Links
 
-[Project Page](https://github.com/KoderLabs/ng2-device-detector)
+[Project Page](https://github.com/KoderLabs/ngx-device-detector)
 
 [Author](https://github.com/AhsanAyaz)
 
-[NPM Package](https://www.npmjs.com/package/ng2-device-detector)
+[NPM Package](https://www.npmjs.com/package/ngx-device-detector)
 
-[License](https://github.com/KoderLabs/ng2-device-detector/blob/master/LICENSE)
+[License](https://github.com/KoderLabs/ngx-device-detector/blob/master/LICENSE)

README.MD

@@ -1,36 +1,39 @@
+<a href="https://koderlabs.github.io/ngx-device-detector">
+    <h1 align="center">ngx-device-detector</h1> 
+</a>
 
-## ng2-device-detector
-[![CI Status](http://img.shields.io/travis/KoderLabs/ng2-device-detector.svg?style=flat)](https://travis-ci.org/KoderLabs/ng2-device-detector)
-[![npm version](https://img.shields.io/npm/v/ng2-device-detector.svg)](https://www.npmjs.com/package/ng2-device-detector) [![npm downloads](https://img.shields.io/npm/dm/ng2-device-detector.svg)](https://www.npmjs.com/package/ng2-device-detector)
-[![npm](https://img.shields.io/npm/dt/ng2-device-detector.svg?style=flat-square)](https://github.com/KoderLabs/ng2-device-detector)
-[![GitHub stars](https://img.shields.io/github/stars/KoderLabs/ng2-device-detector.svg?style=social&label=Star&style=flat-square)](https://github.com/KoderLabs/ng2-device-detector)
-[![npm](https://img.shields.io/npm/l/ng2-device-detector.svg?style=flat-square)](https://github.com/KoderLabs/ng2-device-detector)
+<p align="center">
+An Angular 2 (and beyond) powered AOT compatible device detector that helps to identify browser, os and other useful information regarding the device using the app. The processing is based on user-agent.
+</p>
 
+<p align="center">
+<a href="https://travis-ci.org/KoderLabs/ngx-device-detector"><img src="http://img.shields.io/travis/KoderLabs/ngx-device-detector.svg?style=flat" alt="travis build status" ></a>
+<a href="https://www.npmjs.com/package/ngx-device-detector"><img src="https://img.shields.io/npm/v/ngx-device-detector.svg" alt="npm version" ></a>
+<a href="https://www.npmjs.com/package/ngx-device-detector"><img src="https://img.shields.io/npm/dm/ngx-device-detector.svg" alt="npm downloads/month" ></a>
+<a href="https://www.npmjs.com/package/ngx-device-detector"><img src="https://img.shields.io/npm/dt/ngx-device-detector.svg?style=flat-square" alt="npm downloads total" ></a>
+<a href="https://www.npmjs.com/package/ngx-device-detector"><img src="https://img.shields.io/github/stars/KoderLabs/ngx-device-detector.svg?style=social&label=Star&style=flat-square" alt="github stars" ></a>
+<a href="https://www.npmjs.com/package/ngx-device-detector"><img src="https://img.shields.io/npm/l/ngx-device-detector.svg?style=flat-square" alt="license" ></a>
+</p>
 
-> An Angular 2 (and beyond) powered AOT compatible device detector that helps to identify browser, os and other useful information regarding the device using the app. The processing is based on user-agent.
-
-## Breaking changes in 1.0.0
-The module name and the service name has been changed. See the Usage and Change Log sections below
 
 ## Live DEMO
 
-[Ng2 Device Detector Demo](https://koderlabs.github.io/ng2-device-detector)
-
+[Ngx Device Detector Demo](https://koderlabs.github.io/ngx-device-detector)
 
 
 ## Installation
 
 To install this library, run:
 
 ```bash
-$ npm install ng2-device-detector --save
+$ npm install ngx-device-detector --save
 ```
 
 ## Usage
-Import `Ng2DeviceDetectorModule` in your app.module.ts
+Import `DeviceDetectorModule` in your app.module.ts
 ```bash
   import { NgModule } from '@angular/core';
-  import { Ng2DeviceDetectorModule } from 'ng2-device-detector';
+  import { DeviceDetectorModule } from 'ngx-device-detector';
   ...
   @NgModule({
     declarations: [
@@ -42,7 +45,7 @@ Import `Ng2DeviceDetectorModule` in your app.module.ts
     imports: [
       CommonModule,
       FormsModule,
-      Ng2DeviceDetectorModule.forRoot()
+      DeviceDetectorModule.forRoot()
     ],
     providers:[
       AuthService
@@ -55,7 +58,7 @@ In your component where you want to use the Device Service
 ```bash
   import { Component } from '@angular/core';
   ...
-  import { Ng2DeviceService } from 'ng2-device-detector';
+  import { DeviceDetectorService } from 'ngx-device-detector';
   ...
   @Component({
     selector: 'home',  // <home></home>
@@ -67,7 +70,7 @@ In your component where you want to use the Device Service
   export class HomeComponent {
     deviceInfo = null;
     ...
-    constructor(..., private http: Http, private deviceService: Ng2DeviceService) {
+    constructor(..., private http: Http, private deviceService: DeviceDetectorService) {
       this.epicFunction();
     }
     ...
@@ -142,7 +145,14 @@ MIT © [Ahsan Ayaz](https://github.com/AhsanAyaz)
 
 ## Change Log
 
-#1.0.0 
+#1.1.0 **(contains breaking changes)**
+
+- Added official support to Angular5
+- The package name has been changed to `ngx-device-detector`
+- Renamed the Service from `Ng2DeviceService` to `DeviceDetectorService`
+- Renamed the Module from `Ng2DeviceDetector` to `DeviceDetectorModule`
+
+#1.0.0 **(contains breaking changes)**
 
 - Renamed the Service from `Device` to `Ng2DeviceService`
 - Renamed the Module from `Ng2DeviceDetector` to `Ng2DeviceDetectorModule`

bs-config.json

@@ -0,0 +1,11 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/": "playground",
+      "/node_modules/": "node_modules",
+      "/dist/": "dist",
+      "/.playground": ".playground"
+    }
+  }
+}

demo/.angular-cli.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "ng2-device-detector-demo"
+    "name": "ngx-device-detector-demo"
   },
   "apps": [
     {
@@ -17,7 +17,7 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "ng2-dd",
+      "prefix": "dd",
       "styles": [
         "styles.scss"
       ],
@@ -36,13 +36,16 @@
   },
   "lint": [
     {
-      "project": "src/tsconfig.app.json"
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
     },
     {
-      "project": "src/tsconfig.spec.json"
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
     },
     {
-      "project": "e2e/tsconfig.e2e.json"
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
     }
   ],
   "test": {

demo/README.md

@@ -1,14 +1,14 @@
-# Ng2DeviceDetectorDemo
+# NgxDeviceDetectorDemo
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.3.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.3.
 
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
@@ -21,7 +21,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 ## Running end-to-end tests
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
 
 ## Further help
 

demo/e2e/app.e2e-spec.ts

@@ -1,6 +1,6 @@
 import { Ng2DeviceDetectorDemoPage } from './app.po';
 
-describe('ng2-device-detector-demo App', () => {
+describe('ngx-device-detector-demo App', () => {
   let page: Ng2DeviceDetectorDemoPage;
 
   beforeEach(() => {
@@ -9,7 +9,7 @@ describe('ng2-device-detector-demo App', () => {
 
   it('should display message saying app works', () => {
     page.navigateTo();
-    expect(page.getDemoHeadingText()).toEqual('ng2-device-detector demo');
+    expect(page.getDemoHeadingText()).toEqual('ngx-device-detector demo');
   });
 
   it('should display device information in table', () => {

demo/e2e/app.po.ts

@@ -6,14 +6,14 @@ export class Ng2DeviceDetectorDemoPage {
   }
 
   getDemoHeadingText() {
-    return element(by.css('ng2-dd-root .demo-heading-text')).getText();
+    return element(by.css('dd-root .demo-heading-text')).getText();
   }
 
-  getDeviceInfoElements(){
-    return element.all(by.css('ng2-dd-root .information-table .info-item'));
+  getDeviceInfoElements() {
+    return element.all(by.css('dd-root .information-table .info-item'));
   }
 
   getParagraphText() {
-    return element(by.css('ng2-dd-root h1')).getText();
+    return element(by.css('dd-root h1')).getText();
   }
 }

demo/e2e/tsconfig.e2e.json

@@ -2,10 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

demo/karma.conf.js

@@ -1,13 +1,12 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
-      require('karma-spec-reporter'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
@@ -16,25 +15,14 @@ module.exports = function (config) {
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    files: [
-      { pattern: './src/test.ts', watched: false }
-    ],
-    preprocessors: {
-      './src/test.ts': ['@angular/cli']
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
-    },
     coverageIstanbulReporter: {
       reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
     angularCli: {
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['spec', 'progress', 'coverage-istanbul']
-              : ['spec', 'progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,