0

I have the most simple little Ionic App that works as expected when run in the browser using ionic serve.

However, when the app is run in Ionic View (view.ionic.io), the routing appears to be failing (the index.html is loaded, but nothing within <div ui-view=""></div> is loaded. This is done using ionic upload.

My simple index.html looks like:

  <body ng-app="app">
      my app!
      <div ui-view=""></div>
  </body>

My app.js contains:

angular
    .module("app", [
        "ionic",
        "ngCordova",
        "ui.router"
    ])
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider.state("splash", {
            url: "/splash",
            templateUrl: "components/splash/splash.html",
            controller: "SplashController"
        }).state("login", {
            url: "/login",
            templateUrl: "components/login/login.html",
            controller: "LoginController"
        });

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

I have a SplashController that has:

var SplashController = (function () {
    function SplashController($scope) {
        this.test = null;
        this.scope = null;
        $scope.vm = this;
        this.scope = $scope;
        this.test = "Hello world!";
    }
    SplashController.$inject = ["$scope"];
    return SplashController;
})();
App.SplashController = SplashController;
angular.module("app").controller("SplashController", App.SplashController);

And my really boring splash.html is:

<div class="padding">
    <h4 class="title dark">splash.html</h4>
    <h4 class="title dark">{{ vm.test }}</h4>
</div>

In my browser (ionic serve) I see:

browser screenshot

And on my device (ionic upload / Ionic View app) I just see my app!

What am I doing wrong? Is this an issue with the Ionic View app? Has anyone else run into this?

A few other things to note:

  • The JavaScript is compiled from TypeScript.
  • I had attempted <ion-nav-view></ion-nav-view> / excluding ui.router and the results were the same (works in the browser, but not on the device). I actually dislike the Ionic view animations and prefer to use the standard ui-router, if I can.
Improve this question

1 Answer 1

Reset to default
1

Well this turned out to be the strangest of issues. After further debugging, I realized that not only was the router not working, but Angular was not working at all ({{ 1 + 1 }}) displayed literally.

For some reason, the native app did not like my generated JavaScript in a .tsout directory. I removed it and placed the same exact file in the same directory as my index.html. I'm sure something else was going on behind the scenes, but re-structuring my project files seemed to solve the problem.

The setup with the error:

Project structure:

/www

    /.tsout
        app.js     // both .tsout and app.js are created through my gulp-typescript task
    /components
    /css
    /img
    /lib
    /typings
    index.html

HTML head:

<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="css/ionic.app.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/ng-cordova.min.js"></script>

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

The solution:

My project structure after I found success both in the browser and on the device:

/www
    /components
    /css
    /img
    /lib
    /typings
    index.html
    app.js     // just app.js is created through my gulp-typescript task

The script tag in the head then looks like:

<script src="app.js"></script>

Hope the outcome of this wonkiness can be helpful to someone else!

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Glad you found a solution :), Sometimes ionic view fails silently and I had an issue just by not calling an external javascript with exact name (turns out to be its case sensitive). I reckon to test in phonegap app before going to ionic view http://app.phonegap.com/. Ex: my workflow is, browser -> phonegap app -> xcode/android simulator -> ionic view. Saves lot of time :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.