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

  • Onsen UI

    @Ahmed-Elshorbagy This code requires www/index.html and www/home.html files exactly in that place. Do you have it there (the www root rolder)? Otherwise, replace page="home.html" with the full path from www folder: page="path/to/home.html".



  • I fixed that. Thank you


Log in to reply