Could not resolve '…' from state ''


#1

This is first time i am trying to use ui-router.

Here is my app.js

angular.module('myApp', ['ionic'])

.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();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/index.html");

  $stateProvider.state('index', {
    url: '/'
    template: "index.html",
    controller: 'loginCtrl'
  });


  $stateProvider.state('register', {
    url: "/register"
    template: "register.html",
    controller: 'registerCtrl'
  });
})

As you can see, i have two states. I’m trying to register state like this:

 <a ui-sref="register">
        <button class="button button-balanced">
          Create an account
        </button>
      </a>

But i am getting

Could not resolve ‘register’ from state ‘’

exception. What is the problem here?


#2

try ng-href=#/register instead of ui-sref


#3

URL is chancing to index.html#/register but nothing is happening.


#4

This should be

$urlRouterProvider.otherwise("/");

Since your url for the index state is just ‘/’


#5

That did not make any change. :frowning:

I don’t think my app.js is loading correctly. When i check all other examples, my code look ok. I put debugger, console.log and alert codes into that config function but non of them executed. How can i make sure that my routes are actually loaded?


#6

A) do you have any errors in the console?
B) how are you including the JS files in your main html file?


#7

I’m getting

Could not resolve ‘register’ from state ‘’

error in the console. I’m including JS files, i can see from the network tab that app.js has been loaded.


#8

So the issue maybe from how your project is setup.
Normally, you wounldn’t place your index.html as a template, since your app will get rendered into index.html

So your index should look something like this.

<body>

<ion-nav-bar></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>

Then you would have your individual views as separate html files.

<ion-view view-title="Login"></ion-view>
<ion-view view-title="Register"></ion-view>

Then your satesProvider would look like this.

.config(function($stateProvider, $urlRouterProvider){
  $stateProvider.state('index', {
    url: '/',
    templateUrl: "login.html",
    controller: 'loginCtrl'
  })

.state('register', {
    url: "/register",
    templateUrl: "register.html",
    controller: 'registerCtrl'
  });

  $urlRouterProvider.otherwise("/");
}) 

#9

Allright, right now my files looks like what you gave. When i run my app, i get empty page. How do i set default page now?


#10

The default page is set by this URL: $urlRouterProvider.otherwise("/");

Clear everything in your browser URL starting with /#/ to navigate to the URL specified above.


#11

So my updated post.

You were also missing commas after the urls and your template should be templateUrl


#12

What is proper way to debug ionic apps? i’m just opening index.html file from my browser. There is nothing starting with /#/ is that ok?

I couln’t see it on webpage, is there any step-by-step tutorial?


#13

I already added those commas, that’s not a problem.

I changed templateUrl’s as “/templates/login.html” and “/templates/register.html”. Those files are existing in templates directory. But as i said, i get an empty page.


#14

I use ionic serve from the command line to develop my app. Here is the guide for testing your app in the browser: http://ionicframework.com/docs/guide/testing.html

The links for the guide are on the left side.


#15

#16

I tried to create a codepen too. In codepen, i can see some content but i can’t in my local. I’ll keep try to debugging this and post an update when i solve what is wrong.


#17

I have created an blank application to take it simple. Am i missing something here?

Here is full code:

index.html

<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>

<!-- your app's js -->
<script src="js/app.js"></script>
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content>
  </ion-content>
</ion-pane>

app.js

// Ionic Starter App

angular.module('starter', ['ionic'])

.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();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('login', {
    url: '/',
    templateUrl: 'login.html'
  });

  $urlRouterProvider.otherwise("/");
})

login.html

 <ion-view view-title="Login">
        <ion-content>
          <h1>Login</h1>
          <a ui-sref="register" class="button button-block">
            Register
          </a>
        </ion-content>
      </ion-view>

login.html is at same directory with index.html file. All i see is “Ionic Blank Starter” at the header. Thanks for all the help by the way. (Some html tags gone missing when i surround them with code block while writing this - body and html tags are not shown in answer)


#18

You need <ion-nav-view> instead of <ion-content>:

<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-nav-view></ion-nav-view>
</ion-pane>

#19

Yes! Finally, some progress. Thank you very much.


#20

for me it was a lower case upper case issue urghhhh