Onsen Error home.html does not exist
-
Hello,
I’m trying to implement Facebook login into my application, I’m using the Monaca example. The example working fine when I install it on my phone. But when I copy the code in my project I get these errors:
Uncaught Error: The page is not found: home.html
at XMLHttpRequest.xhr.onerror (onsenui.min.js:5)
at onsenui.min.js:5
at onsenui.min.js:5
at onsenui.min.js:3
at runIfPresent (onsenui.min.js:3)
at onGlobalMessage (onsenui.min.js:3)My code:
Index.html<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <script src="js/app.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <body > <ons-navigator id="myNavigator" page="home.html"></ons-navigator> </body> </body> </html>
Hom.hml
<ons-page ng-controller="HomeCtrl"> <ons-toolbar> <div class="center">Facebook Demo</div> </ons-toolbar> <div class="page"> <p class="center"> Welcome to Facebook Authentication Demo with Monaca using Onsen UI and AngularJS! </p> <ons-button ng-click="Login()"> Connect to Facebook </ons-button> </div> </ons-page>
App.js
ons.bootstrap() .service('StorageService', function() { var setLoginUser = function(user_info) { window.localStorage.login_user = JSON.stringify(user_info); }; var getLoginUser = function(){ return JSON.parse(window.localStorage.login_user || '{}'); }; return { getLoginUser: getLoginUser, setLoginUser: setLoginUser }; }) .controller('HomeCtrl', function($scope, StorageService, $http, $q) { var CheckLoginStatus = function(){ window.facebookConnectPlugin.getLoginStatus( function(data){ if(data.authResponse){ console.log('Login info is found!'); myNavigator.pushPage('profile.html'); }else{ console.log('No login info is found!'); } }, function(e){ LoginError(e); } ); } ons.ready(function() { CheckLoginStatus(); }); var GetProfileInfo = function (authResponse) { var info = $q.defer(); facebookConnectPlugin.api('/me?fields=email,name&access_token=' + authResponse.accessToken, null, function (response) { info.resolve(response); }, function (response) { info.reject(response); } ); return info.promise; }; var LoginSuccess = function(response){ var authResponse = response.authResponse; GetProfileInfo(authResponse).then(function(user) { StorageService.setLoginUser({ name: user.name, id: user.id, email: user.email, profile_url: "http://graph.facebook.com/" + authResponse.userID + "/picture?type=large" }); myNavigator.pushPage('profile.html'); }, function(error){ console.log('Error retrieving user profile' + JSON.stringify(error)); }); }; var LoginError = function(error){ console.log('Login Error: ' + JSON.stringify(error)); // When "User cancelled dialog" error appears if (error.errorCode === "4201"){ CheckLoginStatus(); } }; $scope.Login = function(){ facebookConnectPlugin.login(['email', 'public_profile'], LoginSuccess, LoginError); } }) .controller('ProfileCtrl', function($scope, StorageService, $http, $q) { $scope.user = StorageService.getLoginUser(); var LogoutFromFacebook = function(){ facebookConnectPlugin.logout( function() { console.log('Successful logout!'); myNavigator.pushPage("home.html"); }, function(error) { console.log('Error logging out: ' + JSON.stringify(error)); } ); } $scope.Logout = function(){ ons.notification.confirm({ message: "Are you sure you want to log out?", title: 'Facebook Demo', buttonLabels: ["Yes", "No"], callback: function(idx) { switch (idx) { case 0: LogoutFromFacebook(); case 1: break; break; } } }); } });
-
@Ahmed-Elshorbagy This code requires
www/index.html
andwww/home.html
files exactly in that place. Do you have it there (thewww
root rolder)? Otherwise, replacepage="home.html"
with the full path fromwww
folder:page="path/to/home.html"
.
-
I fixed that. Thank you