Routing error with angular.js and express

Question

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'
    })
})

score 16 · Answer 1 · answered Jun 08 '13 at 12:50

16

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

Try using the base tag :

<base href="/" />

answered Jun 08 '13 at 12:50

Ven

19,015
2
41
61

So if I understand correctly, Angular routes are also relative to the current URL, even when they start with a `/`? – robertklep Jun 08 '13 at 13:18
1

When you start angular, it starts everything after the last / and use it as the base url - unless told otherwise :). – Ven Jun 08 '13 at 13:28
Thanks @Ven for the explanation. Anybody got a link to where this is documented? – kontur Jan 19 '15 at 09:48
Hey This resolve the problem of getting this error but after that I start getting 404 on the css library. – Mishi Apr 28 '17 at 05:59

score 6 · Accepted Answer · answered Jun 08 '13 at 12:22

6

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')
});

answered Jun 08 '13 at 12:22

robertklep

198,204
35
394
381

Hi robert, thank you for your answer. Currently I don't have a parent directory before my static files - does angular naturally assume I do because I'm serving from /parent? – Dan Tang Jun 08 '13 at 12:30
@DanTang no, Angular doesn't, but I think your HTML looks something like this: ``? (without a `/` in front of `javascripts/`). If so, your browser will load the JS files relative to the current page URL. – robertklep Jun 08 '13 at 12:32
Ah got it, that makes sense. Sorry but could I ask one more question - I changed my javascripts to '/javascripts' and now it works sometimes. Like when i start with /parent, the links for /parent/home and /parent/login work, but once i refresh it, it goes straight to /parent (since I made it redirect to '/'), but when I click on the links (e.g. /parent/login), it immediately changes to /parent rather than /parent/login. Do you know how I can solve that? – Dan Tang Jun 08 '13 at 12:53
@DanTang if you're at `/parent/home` and refresh, it should stay there because you have declared a route for that in Angular. I don't understand why it will redirect you back to `/parent`. Check your browsers' console log to see if Angular is generating any errors. – robertklep Jun 08 '13 at 13:02
hmmm, I don't have any more angular errors, but it does redirect me back to parent (i think it could be because I defined otherwise({redirectTo: '/'})? – Dan Tang Jun 08 '13 at 13:08

Routing error with angular.js and express

2 Answers2

Linked