"ionic serve" no longer opening browser (undefined is not a function)

For some reason, the “ionic serve” command has suddenly stopped automatically opening my browser, and is now giving me the following error: “Error opening the browser - [TypeError: undefined is not a function]”

Adittionally, I am now also getting the white screen of death when trying to lauch my application on an android device, leading me to believe that these two issues are in some way relates.

The strange thing however is that the application works perfectly fine if I manucally open its location on the server (even autoreload).

I have no idea what could be causing this issue. Help please.

index.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

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

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

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

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

    <!-- Google Maps JS Api-->
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC9_q8xGyVqD0sK-7b1OmawuODq-g1g9UQ&sensor=true"></script>

    <!-- General Scripts-->
    <script src="js/general/pushwooshandroid.js"></script>
    <script src="js/general/pushwooshios.js"></script>
    <script src="js/general/pushwoosh.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/events.controller.js"></script>
    <script src="js/controllers/event.controller.js"></script>
    <script src="js/controllers/map.controller.js"></script>

    <!-- Factories-->
    <script src="js/factories/events.factory.js"></script>
    <!--./your app's js -->

  </head>
  <body ng-app="artEvents">

    <ion-pane>
      <ion-nav-view></ion-nav-view>
    </ion-pane>
    <!--  Templates -->
    <script id="server-error.html" type="text/ng-template">

      <ion-header-bar class="bar-secondary">
        <h1 class="title">Woopsie !!</h1>
        <button class="button button-clear button-positive" ng-click="closeErrorModal()">Cancel</button>
      </ion-header-bar>

      <ion-content>
        <p>
          could not get data from the sever
        </p>
      </ion-content>

    </script>

  </body>
</html>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('artEvents', ['ionic','ui.router'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    // initialize pushwoosh (push notification service ... from js/pushwoosh.js)
    initPushwoosh();
  });
  })
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('events', {
        url: '/',
        templateUrl: '/js/templates/events.html',
        controller:"EventsController"
      })
      .state('event', {
        url: '/event/:id',
        templateUrl: '/js/templates/event.html',
        controller:"EventController"
      })
      .state('map', {
        url: '/map/:coordinates',
        templateUrl: '/js/templates/map.html',
        controller:"MapController"
      });

      $urlRouterProvider.otherwise("/");

  })
  .constant('config',{
    feedUrl:'http://apps.panmedia.com.jm/artevents/artevents.php'
  });

I don’t know why, but ionic.project file has a new parameter “defaultBrowser”: true. Try to delete. It worked for me.

1 Like

I try to uninstall ionic and reinstall again and it works
Uninstall: sudo npm uninstall cordova ionic
Install again: sudo npm install -g cordova ionic

This has happened to my Ionic 2 project. One day it was working, the next I got this error:

Error opening the browser -  TypeError: s.replace is not a function
at escape (/usr/local/lib/node_modules/ionic/node_modules/open/lib/open.js:62:12)
at open (/usr/local/lib/node_modules/ionic/node_modules/open/lib/open.js:31:30)
at Object.openBrowser (/usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/serve.js:240:7)
at /usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/serve.js:510:15
at _fulfilled (/usr/local/lib/node_modules/ionic/node_modules/q/q.js:787:54)
at self.promiseDispatch.done (/usr/local/lib/node_modules/ionic/node_modules/q/q.js:816:30)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/ionic/node_modules/q/q.js:749:13)
at /usr/local/lib/node_modules/ionic/node_modules/q/q.js:557:44
at flush (/usr/local/lib/node_modules/ionic/node_modules/q/q.js:108:17)
at _combinedTickCallback (internal/process/next_tick.js:67:7)

I have deleted the

"defaultBrowser": true

line from the ionic.config.json file but it just seems to add it back when i try and serve, if it does work I get some weird behaviour in that the version served is always Android native and no matter what I am unable to serve the IOS version. As a work around I am using Ionic Labs which still works fine however it is not ideal. A side effect to the issue is that now all of the .ts files within my app directory have been been compiles into seperate js files. While this does not affect the application itself it is extremely annoying. Any help would be greatly appreciated.

1 Like