CODEWITHSUNDEEP
angularjsonsen-ui
r17n
r17n

Reputation: 225

Error: Cannot set var="navigator" because it will overwrite a read-only variable

I am starting the tutorial for OnsenUI (https://onsen.io/guide/overview.html), and I cannot run the boiler-plate code example.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script>
      var module = ons.bootstrap('my-app', ['onsen']);
      module.controller('AppController', function($scope) { });
      module.controller('PageController', function($scope) {
        ons.ready(function() {
          // Init code here
        });
      });
    </script>
  </head>
  <body ng-controller="AppController">
    <ons-navigator var="navigator">
      <ons-page ng-controller="PageController">
        <!-- Page content -->
      </ons-page>
    </ons-navigator>
  </body>
</html>

I put the js and css files in the right directory, and I receive a single error in the Google debug console: Error: Cannot set var="navigator" because it will overwrite a read-only variable. angular.js:12783

I have changed navigator to 'myNavigator' as is shown in the 'Onsen UI with plain JavaScript' example, and the error message disappears.

Is there something wrong with the boiler-plate code? My environment? Is 'navigator' significant or is it ok to just name it 'myNavigator' and carry on?

Upvotes: 1

Views: 154

Answers (1)

Andi Pavllo
Andi Pavllo

Reputation: 2506

navigator is used internally, just call it with another name, like myNavigator, and it will work fine without throwing error.

Example:

http://codepen.io/andipavllo/pen/reYZEG

Upvotes: 1

Related Questions