ionic-framework - 离子原生设备插件@ionic-native/device 返回所有空值

Question

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

但是，当我将它连接到组件内部，然后运行ionic serve以预览更改时，console.log 返回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"

谢谢！

更新：

我可以通过运行在浏览器中获取设备详细信息：

cordova run browser

这假设您已将浏览器添加为平台，如果未运行：

ionic cordova platform add browser

（来自@AndrewLively 发布的答案中的链接：https ://stackoverflow.com/a/49034015/448816 ）

Answer 1

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

这没有很好的记录，但在 ionic-native repo 中的一个问题中进行了讨论。

Answer 2

应该看到已安装的软件包并在“package.json”中看到它们的版本相同

核心包和原生包必须在同一版本中，或者原生包不应该更大。

必须删除文件夹“平台”

使用这些命令

    ionic build

    ionic cordova platform add browser

    cordova run browser

.ts 的代码

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

并且有效！