3. Onsen Error home.html does not exist
Monaca Onsen UI Discord Chat Github Repo

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
 
Copyright © 2009-2016 Monaca & Onsen UI Team.