Ionic 本机设备插件 @ionic-native/device returns 全部为空

Question

我需要在我的 Ionic 项目中进行设备检测，所以我按照此处的说明安装了 @ionic-native/device 插件：https://ionicframework.com/docs/native/device/

然而，当我将它连接到组件内部时，然后运行 ionic serve 预览更改，console.log returns Device 具有所有值的对象设置为 null，当我尝试使用个人属性时也会发生同样的情况，例如this.device.model:

以下是我在组件内部使用它的方式：

import {Device} from "@ionic-native/device";
// ...

@Component({
    // ...
})
export class MyComponent {

    constructor(private device: Device) {
    }

    ngOnInit() {
        console.log(this.device);
    }

}

我也将它添加到 AppModule:

import {Device} from "@ionic-native/device";
// ...

@NgModule({
    // ...
    providers: [
        Device
    ]
})
export class AppModule() {
}

Cordova 设备插件已自动注入 config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget <!-- ... --> >
    <!-- ... -->
    <plugin name="cordova-plugin-device" spec="2.0.0" />
</widget>

这是我的 Ionic 堆栈（至少应该与问题相关的包）：

"@angular/*": "^5.2.4",      // all packages
"@ionic-native/*": "4.5.2",  // all packages

"@ionic-native/device": "4.5.2"
"ionic-angular": "3.9.2",
"cordova-plugin-device": "2.0.0",
"typescript": "2.6.2"

谢谢！

更新：

我能够通过运行ning 在浏览器中获取设备详细信息：

cordova run browser

这假定您已添加浏览器作为平台，如果没有运行:

ionic cordova platform add browser

（来自@AndrewLively 发布的答案中的link：）

Answer 1

如果您运行在浏览器中使用 ionic serve，那么大多数 ionic-native 插件将无法工作，因为它未被 ionic 视为有效的浏览器平台。

这没有很好的记录，但在 issue in the ionic-native repo 中进行了讨论。

Answer 2

应该看到安装的包，并且看到它们在 "package.json"

中的版本相同

核心包和本机包必须是同一版本，否则本机包不能更大。

必须删除文件夹 "platforms"

使用这些命令

    ionic build

    ionic cordova platform add browser

    cordova run browser

.ts 代码

console.log('Device Model is: ' + this.device.model);

并且有效！

Ionic 本机设备插件 @ionic-native/device returns 全部为空

Ionic native device plugin @ionic-native/device returns all nulls

ionic-framework

cordova-plugins

ionic3

ionic-plugins