Cannot find module "@types/google-maps" in --prod builds

Ionic Framework ionic-v3
1

i have an app which uses google maps. I added the type definitions via

npm install @types/google-maps --save

This works for development (ionic serve) and development builds (ionic run android). However when I try to do an optimized development build via: ionic run android --prod I get a white screen. If I connect to the device via Chrome I see the following error:

Uncaught Error: Cannot find module "@types/google-maps"
    at Object.<anonymous> (main.js:17)
    at e (main.js:1)
    at Object.<anonymous> (main.js:17)
    at e (main.js:1)
    at Object.<anonymous> (main.js:33)
    at e (main.js:1)
    at Object.<anonymous> (main.js:27)
    at e (main.js:1)
    at Object.<anonymous> (main.js:44)
    at e (main.js:1)

Google maps is being loaded from the web in the background (I can see this from the Networks tab). So it is not a permissions issue. It appears to be some sort of runtime dependency problem.

Any ideas on what might be causing this?

Thanks,

Andrew

Other setup:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed
2

Try moving @types/google-maps entry to dev dependencies in package.json

3

Yeah. I’d tried that. It made no difference.

4

Actually I’ve found that it also breaks in ionic serve. It works correctly the first time after you load the page and then breaks whenever you modify the page and it is recompiled. The offending JS is:

/***/ function(module, exports, __webpack_require__) {

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_ionic_angular__ = __webpack_require__(55);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__app_services_TransitService__ = __webpack_require__(93);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__app_services_SettingsService__ = __webpack_require__(321);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__stop_stop__ = __webpack_require__(326);
throw new Error("Cannot find module \"@types/google-maps\"");
/* harmony export (binding) */ __webpack_require__.d(exports, "a", function() { return MapDisplay; });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};

Webpack problem?

This is what it looks like on the first load:

/***/ function(module, exports, __webpack_require__) {

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_ionic_angular__ = __webpack_require__(55);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__app_services_TransitService__ = __webpack_require__(93);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__app_services_SettingsService__ = __webpack_require__(321);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__stop_stop__ = __webpack_require__(326);
/* harmony export (binding) */ __webpack_require__.d(exports, "a", function() { return MapDisplay; });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};

which is missing the obvious throw line

5

Check this thread: https://forum.ionicframework.com/t/googe-maps-do-i-have-to-use-ionic-native