Could not resolve '…' from state ''

ionic-v1
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("/");
})
1 Like
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>
1 Like
19

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

1 Like
20

for me it was a lower case upper case issue urghhhh