3. Onsen Error home.html does not exist

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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;
            }
          }
        });
    }
});
    0 1 Reply
  • 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".

    0

  • I fixed that. Thank you

    0