Angular HTML5 mode with express

Question

I know there are answers to this question, but they're not fully working for me. I'm using Angular 1.4 and Express 4. Express is handling API calls and Angular is supposed to be handling all HTML.

My express app.js:

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

require('./routes/api')(app);

var app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, '../client')));
// This covers serving up the index page
app.use(express.static(path.join(__dirname, '../client/.tmp')));
app.use(express.static(path.join(__dirname, '../client/app')));

app.all('*', function(req, res) { 
  res.redirect('/index.html'); 
});

module.exports = app;

Here is angular app.js

angular
  .module('punyioApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/howitworks', {
        templateUrl: 'views/howitworks.html',
        controller: 'HowItWorksCtrl',
        controllerAs: 'howitworks'
      })
      .otherwise({
        redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
  });

Now, if I go to http://localhost:3000/, I get the main Angular view, as expected. The problem is when I go to http://localhost:3000/howitworks, which redirects me to http://localhost:3000/index.html and does not show the 'howitworks' view. How do I fix the express router so that I can go to http://localhost:3000/howitworks ?

Why are you using app.all(*... and not simply app.get('/', ....? Thanks. — R.A. Lucas
– R.A. Lucas, Commented Aug 3, 2015 at 1:48
My client is a separate project, essentially. The express app doesn't have a 'howitworks' endpoint. My Angular code understands it, though. I'm looking for how to send the unknown URL to Angular. — Nik
– Nik, Commented Aug 3, 2015 at 1:55
And if I can redirect to index.html, it seems like I should be able to send this to Angular somehow that works for Angular. — Nik
– Nik, Commented Aug 3, 2015 at 1:56

Pier-Luc Gendreau · Accepted Answer · 2015-08-03 02:02:41Z

14

Your code is simply redirecting every request to index.html, which isn't what you want. You do need that file, but since Angular handles the routing, you only want Express to send the file, no questions asked.

Basically, you shouldn't be using redirect, but sendFile:

app.get('/*', function(req, res) { 
  res.sendFile(__dirname + '/index.html')
});

Also, as someone pointed out in the comments, you should use get and not all.

answered Aug 3, 2015 at 2:02

Pier-Luc Gendreau

13.8k4 gold badges63 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pier-Luc Gendreau Over a year ago

Add a specific route handler before this one: app.get('/api/some', ...) and then app.get('/*', ...)

user6337061 Over a year ago

@Pier-LucGendreau Why is it, that every time I try to implement this & I go to an url of mine, that I download that file instead of opening the page. I also made a post about this but I can't seem to fix it with your solution: stackoverflow.com/questions/37394053/…

victor.yan · Accepted Answer · 2015-08-03 03:24:45Z

0

If you are using angularjs ui-router ,there is no need to use express,you can use node-static or just nginx ,and use grunt or gulp connect plugin to dubug,I think it's better this way.

answered Aug 3, 2015 at 3:24

victor.yan

1

1 Comment

Nik Over a year ago

Express is handling the RESTful API and I want to be able to deploy everything on one server. It may be a touch weird, but I like the setup.

Hafiz Arslan · Accepted Answer · 2016-08-08 12:30:03Z

0

In case of jade you can use:

app.get('/*', function (req, res) {
res.render('index.pug');
});

answered Aug 8, 2016 at 12:30

Hafiz Arslan

4735 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular HTML5 mode with express

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related