Update ionic angular js to version 1.7.8 “TypeError: Cannot read property '@' of undefined”

ionic-v1
1

I have this problem after upgrading Angular js to version 1.7.8 of my ionic project:

TypeError: Cannot read property '@' of undefined
at a (ionic-angular.min.js:18)
at Object.<anonymous> (ionic-angular.min.js:18)
at angular.js:1388
at invokeLinkFn (angular.js:11266)
at nodeLinkFn (angular.js:10585)
at compositeLinkFn (angular.js:9832)
at compositeLinkFn (angular.js:9835)
at publicLinkFn (angular.js:9697)
at angular.js:1965
at Scope.$eval (angular.js:19393) "<ion-nav-view class="view-container" nav-view-transition="ios">

This is how I did the upgrade:

1- Created a fresh project using ionic start myApp tabs --type ionic1
2- Installed latest angular, angular-animate, angular-sanitize, angular-ui-router using:

bower install angular --save
bower install angular-animate
bower install angular-sanitize
bower install angular-ui-router
bower update

3- I edit index.html file like this:

<!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 rel="manifest" href="manifest.json">

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

    <!-- ionic/angularjs js -->
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="lib/angular-animate/angular-animate.min.js"></script>
    <script src="lib/ionic/js/ionic.min.js"></script>
    <script src="lib/ionic/js/ionic-angular.min.js"></script>
    <script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>

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

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>
</html>

4- Finally I get sure from the versions of “lib/angular/angular.js”,“lib/angular-animate/angular-animate.js” and “lib/angular-sanitize/angular-sanitize.js” is v1.7.8 and “lib/angular-ui-router/release/angular-ui-router.min.js” is v1.0.23.

Now when I run ionic serve I get the problem above. How can I fix it please?

1 Like
2

I found this to be an issue with the 1.0.2.3 version of the angular-ui-router library. If you downgrade that library to use angular-ui-router#0.2.13 you can get past that issue. I am not sure that makes 1.7.8 usable with ionic yet, but it is one step closer.

2 Likes