Testing Error - Help!

tutorials
1

Not sure what Im doing wrong with my setup, but cant view the app properly in iPhone6 view in chrome browser. This is my third attempt to get help on the forum but received no help yet.

When I run $ ionic serve command

I get this message:
The port 35729 was taken on the host localhost - using port 35730 instead
Running dev server: http://localhost:8100
Running live reload server: http://localhost:35730
Watching : [ ‘www//*’, '!www/lib//*’ ]
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

When I run $ ionic emulate ios command:
No target specified for emulator. Deploying to iPhone-6 simulator
2015-04-02 18:47:05.946 ios-sim[1447:507] stderrPath: /Users/marklovett/Ionic-Projects/todo/platforms/ios/cordova/console.log
2015-04-02 18:47:05.946 ios-sim[1447:507] stdoutPath: /Users/marklovett/Ionic-Projects/todo/platforms/ios/cordova/console.log
** RUN SUCCEEDED **
iPhone simulator displays but cant right click to use chrome inspector tool
If I dbl clk into todo.xcodeproj:
xcode opens, then the iPhone simulator runs and it behaves same as above

Here is the tutorial link:
http://ionicframework.com/docs/guide/testing.html

Here is my environment:
OS: Mac OS X Mavericks
Node Version: v0.10.35
Cordova CLI: 4.3.0
Ionic Version: 1.0.0-rc.2
Ionic CLI Version: 1.3.18
Xcode version: Xcode 6.2 Build version 6C131e
ios-sim version: 3.1.1
ios-deploy version: Not installed

2

Hi. I don’t understand what is the error.

  • The browser does not open after running ionic serve?
  • Are you expecting the app to be loaded in your iPhone after running ionic serve?
  • Are you getting any error message?
  • Are you expecting to see the iPhone version / look on the browser?
  • Do you think that the message"The port 35729 was taken on the host localhost - using port 35730 instead" is an error?
  • It doesn’t look like this but… are you running ionic serve command?
3

Thank you for responding.

4

The browser opens. Not trying to view app in iphone right now, just trying to view it properly in the browser.

Im trying to make sense of the messages Im receiving in the command line. Just want to make sure I have it set up right. I dont think I do.

When I run $ ionic emulate ios command:
No target specified for emulator. Deploying to iPhone-6 simulator
2015-04-02 18:47:05.946 ios-sim[1447:507] stderrPath: /Users/marklovett/Ionic-Projects/todo/platforms/ios/cordova/console.log
2015-04-02 18:47:05.946 ios-sim[1447:507] stdoutPath: /Users/marklovett/Ionic-Projects/todo/platforms/ios/cordova/console.log
** RUN SUCCEEDED **
iPhone simulator displays but cant right click to use chrome inspector tool
If I dbl clk into todo.xcodeproj:
xcode opens, then the iPhone simulator runs and it behaves same as above

5

Does it appear that I have everything setup correctly?

What does this message mean?
No target specified for emulator. Deploying to iPhone-6 simulator

Why cant I use chrome dev tools on the iPhone simulator?

6

Yes I am running the $ ionic serve command. Then the browser opens at localhost:8100. I have mamp server setup to run on localhost:8888 but it’s not running right now.

Should it be running on localhost:8100 ?

7

I am not sure about this.

8

In this tutorial, I built out the app to a certain point, but the view was not displaying my work. I added the body tags in index.html like so:

then added the below controller code in the app.js, then ran ionic serve command, but the work did not display. This is where I stopped and trying to determine what the problem might be in my setup.

angular.module(‘todo’, [‘ionic’])

.controller(‘TodoCtrl’, function($scope) {
$scope.tasks = [
{ title: ‘Collect coins’ },
{ title: ‘Eat mushrooms’ },
{ title: ‘Get high enough to grab the flag’ },
{ title: ‘Find the Princess’ }
];
});

9

If you run

ionic serve

and the browser opens and everything works, I don’t see the problem and looks like it is setup correctly.

If you run

$ ionic emulate ios

and get the message No target specified for emulator. Deploying to iPhone-6 simulator that’s because you didn’t specify the target. This was already answered here.

If you want to debug your app deployed on and iPhone, use Safari instead. But ionic have a live reload option to run the app. It prints the logs on the terminal.

You can’t right click and expect to see a context menu as in Chrome.

It doesn’t matter in what port is running as long as that port is not used by something else.

10

Thank you for all the info. I just loaded ios-deploy

I dont think the app was displaying properly because after adding the above code in index.html and app.js and running $ ionic serve the display did not change. I uploaded a screen shot of my ios simulator view after the code was added and run.

image

11

After installing ios-deploy, Im still getting the error

No target specified for emulator. Deploying to iPhone-6 simulator
2015-04-02 19:40:46.131 ios-sim[2267:507] stderrPath: /Users/marklovett/Ionic-Projects/todo/platforms/ios/cordova/console.log
2015-04-02 19:40:46.132 ios-sim[2267:507] stdoutPath: /Users/marklovett/Ionic-Projects/todo/platforms/ios/cordova/console.log

My new system info looks like this:

OS: Mac OS X Mavericks
Node Version: v0.10.35
Cordova CLI: 4.3.0
Ionic Version: 1.0.0-rc.2
Ionic CLI Version: 1.3.18
Xcode version: Xcode 6.2 Build version 6C131e
ios-sim version: 3.1.1
ios-deploy version: 1.4.0

12

I don’t think that’s the cause of the error (the app being displayed properly). It is in your javascript. Maybe a syntax error or a dependency you forgot. You need either safari or logging using livereload.

Here is a demo: http://quick.as/j0bltqmzb

  • First I show you the command to run live reload and console log to the terminal (I forgot to show when the messages are logged in terminal)
  • Then how the apps is reloaded after making changes
  • Then how to inspect errors usings Safari.
13

Ok. I’ll check out your demo. Thx much.

14

Can you please answer one question. When building the app in the tutorial here: http://ionicframework.com/docs/guide/building.html

Can the angular module code be added to the existing code in the app.js file that comes in the ionic package? Or must I 1st remove the existing app.js code that comes in the ionic package, and then add the tutorial angular module code below: ??

angular.module(‘todo’, [‘ionic’])

.controller(‘TodoCtrl’, function($scope) {
$scope.tasks = [
{ title: ‘Collect coins’ },
{ title: ‘Eat mushrooms’ },
{ title: ‘Get high enough to grab the flag’ },
{ title: ‘Find the Princess’ }
];
});

15

My app.js, I think is throwing errors.

It looks like this:

angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.services’])

.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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})

angular.module(‘todo’, [‘ionic’])

.controller(‘TodoCtrl’, function($scope) {
$scope.tasks = [
{ title: ‘Collect coins’ },
{ title: ‘Eat mushrooms’ },
{ title: ‘Get high enough to grab the flag’ },
{ title: ‘Find the Princess’ }
];
});

.config(function($stateProvider, $urlRouterProvider) {

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state’s controller can be found in controllers.js
$stateProvider

// setup an abstract state for the tabs directive
.state(‘tab’, {
url: “/tab”,
abstract: true,
templateUrl: “templates/tabs.html”
})

// Each tab has its own nav history stack:

.state(‘tab.dash’, {
url: ‘/dash’,
views: {
‘tab-dash’: {
templateUrl: ‘templates/tab-dash.html’,
controller: ‘DashCtrl’
}
}
})

.state(‘tab.chats’, {
url: ‘/chats’,
views: {
‘tab-chats’: {
templateUrl: ‘templates/tab-chats.html’,
controller: ‘ChatsCtrl’
}
}
})
.state(‘tab.chat-detail’, {
url: ‘/chats/:chatId’,
views: {
‘tab-chats’: {
templateUrl: ‘templates/chat-detail.html’,
controller: ‘ChatDetailCtrl’
}
}
})

.state(‘tab.account’, {
url: ‘/account’,
views: {
‘tab-account’: {
templateUrl: ‘templates/tab-account.html’,
controller: ‘AccountCtrl’
}
}
});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(’/tab/dash’);

});

16

Here is part of the error message after running the live reload command in your demo $ ionic run ios -l -c -s :

serve / (www/index.html) iOS
serve /lib/ionic/css/ionic.css iOS
serve /lib/ionic/js/ionic.bundle.js iOS
serve /css/style.css iOS
serve /js/controllers.js iOS
serve /js/app.js iOS
serve /cordova.js (platforms/ios/www) iOS
serve /js/services.js iOS
0 312740 error SyntaxError: Unexpected token ‘.’, http://192.168.1.3:8100/js/app.js, Line: 37
serve /cordova_plugins.js (platforms/ios/www) iOS
1 312770 error Error: [$injector:modulerr] Failed to instantiate module todo due to:
[$injector:nomod] Module ‘todo’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

17

Please, at leat indent / format your code…

Read the message. There is an unexpected token ‘.’.

.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    { title: 'Collect coins' },
    { title: 'Eat mushrooms' },
    { title: 'Get high enough to grab the flag' },
    { title: 'Find the Princess' }
  ];
}); <<<<<<<<<<<<<<--------- That semicolon is causing the error

.config(function($stateProvider, $urlRouterProvider) {
   ...
18

Really? I copied and pasted that from the tutorial.

I just removed all the other code, leaving only the tutorial module code in the app.js and it appears to be working.

19

Makin progress. Now my view looks like this:
image

20

Its strange that chrome dev inspector tool doesnt work with ios simulator. That’s a bummer because I always use chrome and I hate to have to move to safari.