Making Angular routes work with Express routes

Question

I've got in impasse with setting Angular routes to work with Express.

I tried to do like here Express 4, NodeJS, AngularJS routing but that did not work. The static index.html serves each time the url changes, but the Angular does not catch the partial.

In my Express I have the following code:

var express = require("express");
var app = express();
app.use(express.static(__dirname + '/app'));
app.use("*",function(req,res){
    res.sendFile(path.join(__dirname,"app/index.html"));
});
app.listen(1337, function(){
    console.log("Server is listening on port 1337");
});

And in my Angular app, I have the following:

var app = angular.module("myapp",["ngRoute","appControllers"]);

    app.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
            $locationProvider.html5Mode(true);
            $routeProvider
                    .when("/list",{
                        templateUrl: "/partials/users.html",
                        controller: "userListCntr"
            })
                    .when("/edit", {
                        templateUrl: "/partials/edit.html",
                        controller: "userEditCntr"
            })
                    .when("/register", {
                        templateUrl: "/partials/register.html",
                        controller: "registerCntr"
            })
                    .when("/login", {
                        templateUrl: "/partials/login.html",
                        controller: "registerCntr"
            });

    }]);

I don't have any errors in my browser console. The html inspector shows: <!-- ngView: --> so the directive is kind of initialized.

And dependency list:

dependencies": {
    "angular": "1.3.x",
    "angular-mocks": "1.3.x",
    "jquery": "1.10.2",
    "bootstrap": "~3.1.1",
    "angular-route": "1.3.x",
    "angular-resource": "1.3.x",
    "angular-animate": "1.3.x"
  }

here is my file structure:

--app (angular app)
   --components
   --js
   --css
   --img
   --assets
   --partials
   --index.html
--node-modules
--server.js (here express settigs are)

ALso, I made changes as follows to account for all static resources, but still does not work:

app.use(express.static(__dirname+ "/app"));
app.use('/js', express.static(__dirname + '/app/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/app/css'));
app.use('/assets', express.static(__dirname + '/app/assets'));
app.use('/components', express.static(__dirname + '/app/components'));
app.use('/img', express.static(__dirname + '/app/img'));
app.use('/partials', express.static(__dirname + '/app/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('/app/index.html', { root: __dirname });
});

Please, help, because I can't find a solution. Thanks!

Answer 1

When you don't pass a path to express.use(), then it defaults to /. The proceeding rule you set for * is either redundant or may not even work.

Also, since you're using html5mode, you need to explicitly set apart routes from resources so Express doesn't try to serve up your index.html file for all requests.

Try this example from Angular UI-Router on for size:

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

Answer 2

Thanks everybody for help. I resolved the question by inserting <base href="/" /> into head section of my Angular index.html. It worked for me, but as of now it's like magic and cargo coding, since I don't understand why it works :) Found solution here: AngularJS: how to enable $locationProvider.html5Mode with deeplinking

Answer 3

I just want to add that adding base href= helped me. I have my app statically served in express and browsing directly to routes in my angular app would cause lots of

refused to execute script because its mime type ('text/html') is not executable and strict mime type checking is enabled

errors to be throw. But adding base href fixed that and I can browse directly to my angular routes now.

Answer 4

While the solution suggested by @kirgol of using base href= works fine, there is an alternative solution which might interest someone looking for simple route serve. In this solution we will not using ExpressJS routing

Simply use this

app.use(express.static(__dirname + '/app'));

instead of this

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

This way expressJS will automatically serve the index.html present at that static location & will handle the routing automatically. It will behave just like a simple http server. The moment you handle the routing using app.all/ app.get - you will have to set base href to tell $locationProvider of location from which it can match routes

Answer 5

I too faced a similar situation for routing through angular components using express, this is how I was able to resolve the routing issue:

Setup for my Nodejs Project:

• Build an Angular Project for production and placed in the public folder.

• Created an app.js file for the express server with the following contents:

  var express = require('express'); var app = require('express')(); const port = 8090; app.use(express.static('public')); app.listen(port,()=>{console.log("App working at port : http://localhost:"+port)});

Running this loaded the Root Component only, from where I had to manually route through different pages using routerLink. If I instead tried to give the child components directly using URL I got a Cannot GET/{URL} error.

Fix:

• I added the express-http-proxy package imported as
• var proxy = require('express-http-proxy');
• Then added in the following line after the app.use(express.static('public'));
• app.use('/*',proxy('http://localhost:'+port+'/*'));

This fixed my issue.Apparently there is a more standard fix Refer Link