Routing error with angular.js and express

All we need is an easy explanation of the problem, so here it is.

I am trying to do routing with angular.js around /parent root, which works if I’m using anchor links, etc (aka routing handled purely from angular. For instance, a link that has href of ‘/parent/createstudent’ works. However, when I type this in the url bar or when I refresh it when it is already at that location, it generates an error since the backend route isn’t done yet.

I thus tried a catchall route (‘/parent/*’) in express, but this is resulting in an error with all my js and css not being read. Does anyone know how to solve this?

My static file directory

public
  -> javascripts
      -> app.js
      -> angular.js
  -> stylesheets
  -> images

Error:

Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/parent/javascripts/jquery.js". home:1
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/parent/javascripts/angular.js". home:1
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/parent/javascripts/main.js". home:1
Uncaught SyntaxError: Unexpected token < jquery.js:1
Uncaught SyntaxError: Unexpected token < angular.js:1
Uncaught SyntaxError: Unexpected token < 

Express

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

Angular routing (i declare the controllers in the view itself)

var app = angular.module('app', []).config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when('/parent/login', 
    {
      templateUrl: '../templates/login.html'
    }).
    when('/parent/home', 
    {
      templateUrl: '../templates/home.html'
    }).
    otherwise(
    {
      redirectTo: '/parent'
    })
})

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

This is a newly introduced “change of behavior” (or bug).

Try using the base tag :

<base href="/" rel="nofollow noreferrer noopener" />

Method 2

You’re serving your JS/CSS via /parent as well:

... http://localhost:3000/parent/javascripts/jquery.js
                         ^^^^^^^

So if you declare your routes before you declare the express.static middleware, your catch-all route will handle all JS/CSS requests.

You should use a setup similar to this:

// express.static() first...
app.use('/parent', express.static(__dirname + '/public'));

// ...followed by your catch-all route (only one needed)
app.get('/parent*', function(req, res) {
  res.render('main')
});

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply