0

I have configured my ui-router like this:

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

        $stateProvider
            .state('home', {
                url: "/home",
                templateUrl : 'home/home.html',
                controllerUrl: 'home/controller.js'
            })
            .state('blog', {
                url: "/blog",
                templateUrl : 'blogger/blog.html',
                controllerUrl: 'bloger/controller.js'
            })

        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true
        });
    });

Server code :

var express = require('express');
var serveStatic = require('serve-static');

var server_port = 9000;

var server_ip_address = '127.0.0.1'

var app = express();

app.use(express.static('app'));

app.use(serveStatic('app', {'index': ['index.html', 'index.htm']}));

dirName = 'app';

options = {
  root: dirName,
  dotfiles: 'deny',
  headers: {
    'x-timestamp': Date.now(),
    'x-sent': true
  }
};

app.get('*', function(req, res) {
  return res.sendFile('index.html', options);
});

app.listen(server_port, server_ip_address, function () {
  console.log( "Listening on " + server_ip_address + ", server_port " + server_port)
});

But whenever I hit Ctrl/Command + R (or refresh), it says that it cannot find the path? How can I get around this problem?

Folder structure : Views : ./app/home/, app/blog/ Basefile: ./app/index.html Angular UI-routing from : ./app/base.js

3 Answers3

1

The problem would be in the server settings. Angular is Front Controller application. You need every request redirect to index.html/index.php on your server. Htaccess settings in apache for example. Further information can be found here: htaccess redirect for Angular routes

Community
  • 1
  • 1
Zdenek Hatak
  • 1,135
  • 14
  • 23
  • I added my server code. Can you specify where it's going wrong? –  Aug 02 '16 at 05:21
  • Also, if this is server issue, why this wasn't the case when I was using 'ngRoute' ? –  Aug 04 '16 at 00:30
0

You can Use the below code in your app.js, & then it work :

UPDATED :

    /** Below code set the html as your default engine*/

   var fs = require('fs');
   app.engine('html',function(path,opt,fn){  //manishp
       fs.readFile(path,'utf-8',function(err,str){
          if(err) return str;
          return fn(null,str);
       });
  });


 app.get('*',function(req,res){
    res.render('<your_layout_file_or_basefile>');    
 });

This is mainly because your AngularJS routes aren't actual html pages. An example would be if you have a route in your angular app to /login. This url works fine if you link to it from inside your app but if a user tries to go directly to that page the server will return a 404.

This is because AngularJS HTML5 mode uses the History API to push a new url to your browser. Yes, this require some extra work on the server side to have those url return the correct content.

Abhay
  • 6,410
  • 4
  • 26
  • 34
  • It throws Error: Cannot find module 'html' when I refresh. –  Aug 03 '16 at 01:18
  • Name your index file or layout file, Also paste your code which give you cannot fin module error Because i am using the above solution & it work for me. – Abhay Aug 03 '16 at 03:54
  • I have added the code and the folder structure to my post. –  Aug 04 '16 at 00:43
  • @javier, please see the updated answer. The error was occured because i have n't set the html engine for rendering. Update your code & it will work fine now. – Abhay Aug 04 '16 at 04:47
  • Still gives me an error. Updated the code. The one that works for me. –  Aug 04 '16 at 15:20
  • Great, you have find the solution. – Abhay Aug 05 '16 at 03:27
0

The Problem is from your server side you should handle all routes in your server.js file. For Example here is the snippet

router = settings.express.Router()
dirName = settings.path.resolve(__dirname, '..', '..');

options = {
  root: dirName + '/website/views',
  dotfiles: 'deny',
  headers: {
    'x-timestamp': Date.now(),
    'x-sent': true
  }
};

router.get('*', function(req, res) {
  return res.sendFile('index.html', options);
});
The Mechanic
  • 2,301
  • 1
  • 26
  • 37