Closed Faris-AH closed 7 years ago
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
@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 :
ng serve
Ng2DeviceDetector
in your @ngModule
. Save the fileThe error should have gone by now. I hope angular-cli resolves this issue soon 😄
Hacks always work.Thanks.
@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
@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.
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?
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.
Any chance that you could share that module, to save me having to do the exact same thing?
@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;
}
}
}
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';
cloned a fresh project using angular cli . shows "ERROR in Ng2DeviceDetector is not an NgModule"