gpt4 book ai didi

javascript - "device is not defined": Codrova/Ionic + TypeScript

转载 作者:行者123 更新时间:2023-11-28 07:15:28 25 4
gpt4 key购买 nike

当我在浏览器(通过 ionicserve)和我的设备上加载 Ionic 应用程序时,出现非常常见的设备未定义错误。

我是 TypeScript 的新手,我认为我的问题可能与其中的一些误解有关。

我的 index.html 包含(请注意,我的 DOM 元素中缺少 ng-app):

    <link href="css/ionic.app.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- inject:js -->
<script src="lib/node_modules/ng-cordova/dist/ng-cordova-mocks.min.js"></script>
<script src="lib/node_modules/ng-cordova/dist/ng-cordova.min.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/device.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/file.js"></script>
<!-- endinject -->

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

</head>
<body>

<div ui-view=""></div>

<script src="app.js"></script>
<script src="bootstrapApp.js"></script>

</body>

这里,app.js 是从 TypeScript 编译的。我在这里发生了很多事情,但有趣的部分是:

var App;
(function (App) {
"use strict";
angular.module("app", [
"ionic",
"ngCordova",
"ui.router"
])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("splash", {
url: "/splash",
templateUrl: "components/splash/splash.html",
controller: "SplashController"
});
$urlRouterProvider.otherwise("/splash");
});
})(App || (App = {}));
var App;
(function (App) {
"use strict";
var DeviceService = (function () {
function DeviceService($cordovaDevice) {
this.device = null;
this.device = $cordovaDevice.getDevice();
console.log(this.device);
}
DeviceService.$inject = ["$cordovaDevice"];
return DeviceService;
})();
angular.module("app").service("DeviceService", DeviceService);
})(App || (App = {}));

为了确保我的设备“准备就绪”,我遵循了在这里找到的建议:https://stackoverflow.com/a/27975700/3817101

所以,我有一个 bootstrapApp.js 文件,其中包含:

window.ionic.Platform.ready(function() {
console.log("platform is ready");
angular.bootstrap(document, ['app']);
});

在页面加载时,除了 $cordovaDevice 的使用之外,一切似乎都很顺利。我的控制台显示:

platform is ready
ionic.bundle.js:20306 ReferenceError: device is not defined

很明显,我试图在一切“准备好”之前使用该设备,但我似乎不知道哪里出了问题。有什么建议吗?

最佳答案

错误不在您发布的代码中(您需要类似 this.device.foo 的内容才能收到错误,但您的代码中没有这样的 .foo) 。

解决方案

JS 文件的顺序可能会导致这种情况。更改:

<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- inject:js -->
<script src="lib/node_modules/ng-cordova/dist/ng-cordova-mocks.min.js"></script>
<script src="lib/node_modules/ng-cordova/dist/ng-cordova.min.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/device.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/file.js"></script>
<!-- endinject -->

致:

<!-- inject:js -->
<script src="lib/node_modules/ng-cordova/dist/ng-cordova-mocks.min.js"></script>
<script src="lib/node_modules/ng-cordova/dist/ng-cordova.min.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/device.js"></script>
<script src="lib/node_modules/ng-cordova/src/plugins/file.js"></script>
<!-- endinject -->

<script src="lib/ionic/js/ionic.bundle.js"></script>

关于javascript - "device is not defined": Codrova/Ionic + TypeScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30876694/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com