ERROR :in Ng2DeviceDetector is not an NgModule

[Faris-AH]

cloned a fresh project using angular cli .
shows "ERROR in Ng2DeviceDetector is not an NgModule"

[karan83]

I am also getting ERROR in Ng2DeviceDetector is not an NgModule error after upgrade Angular Cli (@angular/cli: 1.0.0-rc.1). It was working fine with with angular-cli:1.0.0-beta.28.3
Also it does work if i give absolute path of module like path-to-node_module/ng2-device-detector/dist

[AhsanAyaz]

@karan83 , @Faris-AH . The issue is with the recent angular-cli versions which is opened here

The issue is that when you serve the first time, it throws this error. The quick workaround (until angular-cli resolves this issue) is :

• do ng serve
• comment out the line where you're importing Ng2DeviceDetector in your @ngModule. Save the file
• If the build passes correctly without the error and serves fine, uncomment the line you commented in the above step and hit save.

The error should have gone by now.
I hope angular-cli resolves this issue soon 😄

[Faris-AH]

Hacks always work.Thanks.

[karan83]

@AhsanAyaz , Thanks for reply. I did development same way you mentioned. It does show error only first time, but my concern is that i am not able to make build for production.
I have gone through your mentioned thread and found that some users recommended to publish metdadata.json & also use of @types instead typings with latest Angular Cli

[AhsanAyaz]

@karan83 . Since this is an issue with angular-cli, i'm not sure if there's a way to make the build successful except downgrading to angular-cli:1.0.0-beta.28.3.
I'll still look into it to see if there's a way. I'll update here.

[queejie]

Thanks for the module. This is still an issue with angular 4 and the latest cli (1.0.1). I'm not able to get it to compile with it commented out. Are you sure it is a bug with angular-cli?

[nthaxis]

I just took all the code from the node_modules package and made my own module, and service inside my app. So I can produce builds now.

[DaveSin]

Any chance that you could share that module, to save me having to do the exact same thing?

[nthaxis]

@DaveSin

device.module.ts

import { NgModule } from '@angular/core';
import { DeviceService } from './device.service';


@NgModule({
    providers:[
        DeviceService
    ]
})
export class DeviceModule {

}

device.service.ts

import {Injectable} from '@angular/core';
import * as Constants from './device-constants';
import {ReTree} from './retree';
@Injectable()


export class DeviceService{
    ua: any;
    userAgent: any;
    os : any;
    browser: any;
    device : any;
    os_version: any;
    browser_version:any;

    constructor() {
        let self = this;
        self.ua = window.navigator.userAgent;
        self._setDeviceInfo();
    }

    private _setDeviceInfo(){
        let self = this;
        let reTree = new ReTree();
        let ua = self.ua;
        self.userAgent = ua;
        self.os = Object.keys(Constants.OS).reduce(function (obj:any, item:any) {
            obj[Constants.OS[item]] = reTree.test(ua, Constants.OS_RE[item]);
            return obj;
        }, {});

        self.browser = Object.keys(Constants.BROWSERS).reduce(function (obj:any, item:any) {
            obj[Constants.BROWSERS[item]] = reTree.test(ua, Constants.BROWSERS_RE[item]);
            return obj;
        }, {});

        self.device = Object.keys(Constants.DEVICES).reduce(function (obj:any, item:any) {
            obj[Constants.DEVICES[item]] = reTree.test(ua, Constants.DEVICES_RE[item]);
            return obj;
        }, {});

        self.os_version = Object.keys(Constants.OS_VERSIONS).reduce(function (obj:any, item:any) {
            obj[Constants.OS_VERSIONS[item]] = reTree.test(ua, Constants.OS_VERSIONS_RE[item]);
            return obj;
        }, {});

        self.os = [
            Constants.OS.WINDOWS,
            Constants.OS.IOS,
            Constants.OS.MAC,
            Constants.OS.ANDROID,
            Constants.OS.LINUX,
            Constants.OS.UNIX,
            Constants.OS.FIREFOX_OS,
            Constants.OS.CHROME_OS,
            Constants.OS.WINDOWS_PHONE
        ].reduce(function (previousValue, currentValue) {
            return (previousValue === Constants.OS.UNKNOWN && self.os[currentValue]) ? currentValue : previousValue;
        }, Constants.OS.UNKNOWN);

        self.browser = [
            Constants.BROWSERS.CHROME,
            Constants.BROWSERS.FIREFOX,
            Constants.BROWSERS.SAFARI,
            Constants.BROWSERS.OPERA,
            Constants.BROWSERS.IE,
            Constants.BROWSERS.MS_EDGE,
            Constants.BROWSERS.FB_MESSANGER
        ].reduce(function (previousValue, currentValue) {
            return (previousValue === Constants.BROWSERS.UNKNOWN && self.browser[currentValue]) ? currentValue : previousValue;
        }, Constants.BROWSERS.UNKNOWN);

        self.device = [
            Constants.DEVICES.ANDROID,
            Constants.DEVICES.I_PAD,
            Constants.DEVICES.IPHONE,
            Constants.DEVICES.I_POD,
            Constants.DEVICES.BLACKBERRY,
            Constants.DEVICES.FIREFOX_OS,
            Constants.DEVICES.CHROME_BOOK,
            Constants.DEVICES.WINDOWS_PHONE,
            Constants.DEVICES.PS4,
            Constants.DEVICES.CHROMECAST,
            Constants.DEVICES.APPLE_TV,
            Constants.DEVICES.GOOGLE_TV,
            Constants.DEVICES.VITA
        ].reduce(function (previousValue, currentValue) {
            return (previousValue === Constants.DEVICES.UNKNOWN && self.device[currentValue]) ? currentValue : previousValue;
        }, Constants.DEVICES.UNKNOWN);

        self.os_version = [
            Constants.OS_VERSIONS.WINDOWS_3_11,
            Constants.OS_VERSIONS.WINDOWS_95,
            Constants.OS_VERSIONS.WINDOWS_ME,
            Constants.OS_VERSIONS.WINDOWS_98,
            Constants.OS_VERSIONS.WINDOWS_CE,
            Constants.OS_VERSIONS.WINDOWS_2000,
            Constants.OS_VERSIONS.WINDOWS_XP,
            Constants.OS_VERSIONS.WINDOWS_SERVER_2003,
            Constants.OS_VERSIONS.WINDOWS_VISTA,
            Constants.OS_VERSIONS.WINDOWS_7,
            Constants.OS_VERSIONS.WINDOWS_8_1,
            Constants.OS_VERSIONS.WINDOWS_8,
            Constants.OS_VERSIONS.WINDOWS_10,
            Constants.OS_VERSIONS.WINDOWS_PHONE_7_5,
            Constants.OS_VERSIONS.WINDOWS_PHONE_8_1,
            Constants.OS_VERSIONS.WINDOWS_PHONE_10,
            Constants.OS_VERSIONS.WINDOWS_NT_4_0,
            Constants.OS_VERSIONS.MACOSX,
            Constants.OS_VERSIONS.MACOSX_3,
            Constants.OS_VERSIONS.MACOSX_4,
            Constants.OS_VERSIONS.MACOSX_5,
            Constants.OS_VERSIONS.MACOSX_6,
            Constants.OS_VERSIONS.MACOSX_7,
            Constants.OS_VERSIONS.MACOSX_8,
            Constants.OS_VERSIONS.MACOSX_9,
            Constants.OS_VERSIONS.MACOSX_10,
            Constants.OS_VERSIONS.MACOSX_11,
            Constants.OS_VERSIONS.MACOSX_12,
            Constants.OS_VERSIONS.MACOSX_13,
            Constants.OS_VERSIONS.MACOSX_14,
            Constants.OS_VERSIONS.MACOSX_15
        ].reduce(function (previousValue, currentValue) {
            return (previousValue === Constants.OS_VERSIONS.UNKNOWN && self.os_version[currentValue]) ? currentValue : previousValue;
        }, Constants.OS_VERSIONS.UNKNOWN);

        self.browser_version = "0";
        if (self.browser !== Constants.BROWSERS.UNKNOWN) {
            var re = Constants.BROWSER_VERSIONS_RE[self.browser];
            var res = reTree.exec(ua, re);
            if (!!res) {
                self.browser_version = res[1];
            }
        }
    }

    public getDeviceInfo(): any{
        let self = this;
        return {
            userAgent: self.userAgent,
            os : self.os,
            browser: self.browser,
            device : self.device,
            os_version: self.os_version,
            browser_version:self.browser_version,
        };
    }
    public isMobile() {
        let self = this;
        return [
            Constants.DEVICES.ANDROID,
            Constants.DEVICES.I_PAD,
            Constants.DEVICES.IPHONE,
            Constants.DEVICES.I_POD,
            Constants.DEVICES.BLACKBERRY,
            Constants.DEVICES.FIREFOX_OS,
            Constants.DEVICES.WINDOWS_PHONE,
            Constants.DEVICES.VITA
        ].some(function (item) {
            return self.device == item;
        });
    };

    public isTablet() {
        let self = this;
        return [
            Constants.DEVICES.I_PAD,
            Constants.DEVICES.FIREFOX_OS
        ].some(function (item) {
            return self.device == item;
        });
    };

    public isDesktop() {
        let self = this;
        return [
            Constants.DEVICES.PS4,
            Constants.DEVICES.CHROME_BOOK,
            Constants.DEVICES.UNKNOWN
        ].some(function (item) {
            return self.device == item;
        });
    };
}

device-constants.ts

export const BROWSERS:any = {
    CHROME: "chrome",
    FIREFOX: "firefox",
    SAFARI: "safari",
    OPERA: "opera",
    IE: "ie",
    MS_EDGE: "ms-edge",
    FB_MESSANGER: "fb-messanger",
    UNKNOWN: "unknown"
};

export const DEVICES:any = {
    ANDROID: "android",
    I_PAD: "ipad",
    IPHONE: "iphone",
    I_POD: "ipod",
    BLACKBERRY: "blackberry",
    FIREFOX_OS: "firefox-os",
    CHROME_BOOK: "chrome-book",
    WINDOWS_PHONE: "windows-phone",
    PS4: "ps4",
    VITA: "vita",
    CHROMECAST: "chromecast",
    APPLE_TV:"apple-tv",
    GOOGLE_TV:"google-tv",
    UNKNOWN: "unknown"
};

export const OS:any = {
    WINDOWS: "windows",
    MAC: "mac",
    IOS: "ios",
    ANDROID: "android",
    LINUX: "linux",
    UNIX: "unix",
    FIREFOX_OS: "firefox-os",
    CHROME_OS: "chrome-os",
    WINDOWS_PHONE: "windows-phone",
    UNKNOWN: "unknown"
};

export const OS_VERSIONS:any = {
    WINDOWS_3_11: "windows-3-11",
    WINDOWS_95: "windows-95",
    WINDOWS_ME: "windows-me",
    WINDOWS_98: "windows-98",
    WINDOWS_CE: "windows-ce",
    WINDOWS_2000: "windows-2000",
    WINDOWS_XP: "windows-xp",
    WINDOWS_SERVER_2003: "windows-server-2003",
    WINDOWS_VISTA: "windows-vista",
    WINDOWS_7: "windows-7",
    WINDOWS_8_1: "windows-8-1",
    WINDOWS_8: "windows-8",
    WINDOWS_10: "windows-10",
    WINDOWS_PHONE_7_5: "windows-phone-7-5",
    WINDOWS_PHONE_8_1: "windows-phone-8-1",
    WINDOWS_PHONE_10: "windows-phone-10",
    WINDOWS_NT_4_0: "windows-nt-4-0",
    MACOSX_15: "mac-os-x-15",
    MACOSX_14: "mac-os-x-14",
    MACOSX_13: "mac-os-x-13",
    MACOSX_12: "mac-os-x-12",
    MACOSX_11: "mac-os-x-11",
    MACOSX_10: "mac-os-x-10",
    MACOSX_9: "mac-os-x-9",
    MACOSX_8: "mac-os-x-8",
    MACOSX_7: "mac-os-x-7",
    MACOSX_6: "mac-os-x-6",
    MACOSX_5: "mac-os-x-5",
    MACOSX_4: "mac-os-x-4",
    MACOSX_3: "mac-os-x-3",
    MACOSX_2: "mac-os-x-2",
    MACOSX: "mac-os-x",
    UNKNOWN: "unknown"
};

export const OS_RE:any = {
    WINDOWS: {and: [{or: [/\bWindows|(Win\d\d)\b/, /\bWin 9x\b/]}, {not: /\bWindows Phone\b/}]},
    MAC: {and: [/\bMac OS\b/, {not: /Windows Phone/}]},
    IOS: {and: [{or: [/\biPad\b/, /\biPhone\b/, /\biPod\b/]}, {not: /Windows Phone/}]},
    ANDROID: {and: [/\bAndroid\b/, {not: /Windows Phone/}]},
    LINUX: /\bLinux\b/,
    UNIX: /\bUNIX\b/,
    FIREFOX_OS: {and: [/\bFirefox\b/, /Mobile\b/]},
    CHROME_OS: /\bCrOS\b/,
    WINDOWS_PHONE: {or: [/\bIEMobile\b/, /\bWindows Phone\b/]},
    PS4: /\bMozilla\/5.0 \(PlayStation 4\b/,
    VITA: /\bMozilla\/5.0 \(Play(S|s)tation Vita\b/
};

export const BROWSERS_RE:any = {
    CHROME: {and: [{or: [/\bChrome\b/, /\bCriOS\b/]}, {not: {or: [/\bOPR\b/, /\bEdge\b/]}}]},
    FIREFOX: /\bFirefox\b/,
    SAFARI: {and: [/^((?!CriOS).)*\Safari\b.*$/, {not: {or: [/\bOPR\b/, /\bEdge\b/, /Windows Phone/]}}]},
    OPERA: {or: [/Opera\b/, /\bOPR\b/]},
    IE: {or: [/\bMSIE\b/, /\bTrident\b/,/^Mozilla\/5\.0 \(Windows NT 10\.0; Win64; x64\)$/]},
    MS_EDGE: {or: [/\bEdge\b/]},
    PS4: /\bMozilla\/5.0 \(PlayStation 4\b/,
    VITA: /\bMozilla\/5.0 \(Play(S|s)tation Vita\b/,
    FB_MESSANGER: /\bFBAN\/MessengerForiOS\b/
};

export const DEVICES_RE:any = {
    ANDROID: {and: [/\bAndroid\b/, {not: /Windows Phone/}]},
    I_PAD: /\biPad\b/,
    IPHONE: {and: [/\biPhone\b/, {not: /Windows Phone/}]},
    I_POD: /\biPod\b/,
    BLACKBERRY: /\bblackberry\b/,
    FIREFOX_OS: {and: [/\bFirefox\b/, /\bMobile\b/]},
    CHROME_BOOK: /\bCrOS\b/,
    WINDOWS_PHONE: {or: [/\bIEMobile\b/, /\bWindows Phone\b/]},
    PS4: /\bMozilla\/5.0 \(PlayStation 4\b/,
    CHROMECAST: /\bCrKey\b/,
    APPLE_TV:/^iTunes-AppleTV\/4.1$/,
    GOOGLE_TV:/\bGoogleTV\b/,
    VITA: /\bMozilla\/5.0 \(Play(S|s)tation Vita\b/
};

export const OS_VERSIONS_RE:any = {
    WINDOWS_3_11: /Win16/,
    WINDOWS_95: /(Windows 95|Win95|Windows_95)/,
    WINDOWS_ME: /(Win 9x 4.90|Windows ME)/,
    WINDOWS_98: /(Windows 98|Win98)/,
    WINDOWS_CE: /Windows CE/,
    WINDOWS_2000: /(Windows NT 5.0|Windows 2000)/,
    WINDOWS_XP: /(Windows NT 5.1|Windows XP)/,
    WINDOWS_SERVER_2003: /Windows NT 5.2/,
    WINDOWS_VISTA: /Windows NT 6.0/,
    WINDOWS_7: /(Windows 7|Windows NT 6.1)/,
    WINDOWS_8_1: /(Windows 8.1|Windows NT 6.3)/,
    WINDOWS_8: /(Windows 8|Windows NT 6.2)/,
    WINDOWS_10: /(Windows NT 10.0)/,
    WINDOWS_PHONE_7_5: /(Windows Phone OS 7.5)/,
    WINDOWS_PHONE_8_1: /(Windows Phone 8.1)/,
    WINDOWS_PHONE_10: /(Windows Phone 10)/,
    WINDOWS_NT_4_0: {and: [/(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/, {not: /Windows NT 10.0/}]},
    MACOSX: /(MAC OS X\s*[^ 0-9])/,
    MACOSX_3: /(Darwin 10.3|Mac OS X 10.3)/,
    MACOSX_4: /(Darwin 10.4|Mac OS X 10.4)/,
    MACOSX_5: /(Mac OS X 10.5)/,
    MACOSX_6: /(Mac OS X 10.6)/,
    MACOSX_7: /(Mac OS X 10.7)/,
    MACOSX_8: /(Mac OS X 10.8)/,
    MACOSX_9: /(Mac OS X 10.9)/,
    MACOSX_10: /(Mac OS X 10.10)/,
    MACOSX_11: /(Mac OS X 10.11)/,
    MACOSX_12: /(Mac OS X 10.12)/,
    MACOSX_13: /(Mac OS X 10.13)/,
    MACOSX_14: /(Mac OS X 10.14)/,
    MACOSX_15: /(Mac OS X 10.15)/
};

export const BROWSER_VERSIONS_RE_MAP:any = {
    CHROME: [/\bChrome\/([\d\.]+)\b/, /\bCriOS\/([\d\.]+)\b/],
    FIREFOX: /\bFirefox\/([\d\.]+)\b/,
    SAFARI: /\bVersion\/([\d\.]+)\b/,
    OPERA: [/\bVersion\/([\d\.]+)\b/, /\bOPR\/([\d\.]+)\b/],
    IE: [/\bMSIE ([\d\.]+\w?)\b/, /\brv:([\d\.]+\w?)\b/],
    MS_EDGE: /\bEdge\/([\d\.]+)\b/
};

export const BROWSER_VERSIONS_RE:any = Object.keys(BROWSER_VERSIONS_RE_MAP).reduce(function (obj:any, key:any) {
    obj[BROWSERS[key]] = BROWSER_VERSIONS_RE_MAP[key];
    return obj;
}, {});

retree.ts

export class ReTree {

    constructor() {

    }

    public test(string: string , regex:any) : any {
        let self = this;
        if (typeof regex === 'string') {
            regex=new RegExp(regex);
        }

        if (regex instanceof RegExp) {
            return regex.test(string);
        }
        else if (regex && Array.isArray(regex.and)) {
            return regex.and.every(function (item : any) {
                return self.test(string, item);
            });
        }
        else if (regex && Array.isArray(regex.or)) {
            return regex.or.some(function (item : any) {
                return self.test(string, item);
            });
        }
        else if (regex && regex.not) {
            return !self.test(string, regex.not);
        }
        else {
            return false;
        }
    }

    public exec(string:string, regex:any): any {
        let self = this;
        if (typeof regex === 'string') {
            regex=new RegExp(regex);
        }

        if (regex instanceof RegExp) {
            return regex.exec(string);
        }
        else if (regex && Array.isArray(regex)) {
            return regex.reduce(function (res : any, item : any) {
                return (!!res) ? res : self.exec(string, item);
            }, null);
        }
        else {
            return null;
        }
    }
}

[khoanguyenlio]

This problem will fixed when we upgrade to the verison ng2-device-detector@1.0.0.
But some how, if you guys don't want to upgrade version to 1.0.0 and keep using 0.1.0. Just create this. I tested in my project:

import { ReTree } from 'ng2-device-detector/dist/services/retree.service';
import { CommonModule } from '@angular/common';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Device } from 'ng2-device-detector';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [

  ],
  exports: [
  ]
})
export class DetechService {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: DetechService,
      providers: [
        ReTree,
        Device
      ]
    };
  }
}
export { Device } from 'ng2-device-detector';

in app.module -> import { DetechService } from './services/detech.service';
how to use: -> import {Device} from './../../services/detech.service';