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

Ven · Accepted Answer · 2013-06-08 12:50:01Z

16

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

Try using the base tag :

<base href="/" />

answered Jun 8, 2013 at 12:50

Ven

19k2 gold badges44 silver badges62 bronze badges

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

4 Comments

robertklep Over a year ago

So if I understand correctly, Angular routes are also relative to the current URL, even when they start with a /?

Ven Over a year ago

When you start angular, it starts everything after the last / and use it as the base url - unless told otherwise :).

kontur Over a year ago

Thanks @Ven for the explanation. Anybody got a link to where this is documented?

Maheen Nasir Over a year ago

Hey This resolve the problem of getting this error but after that I start getting 404 on the css library.

robertklep · Accepted Answer · 2013-06-08 12:22:15Z

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 8, 2013 at 12:22

robertklep

205k38 gold badges421 silver badges412 bronze badges

5 Comments

Dan Tang Over a year ago

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?

robertklep Over a year ago

@DanTang no, Angular doesn't, but I think your HTML looks something like this: <script src="javascripts/angular.js"></script>? (without a / in front of javascripts/). If so, your browser will load the JS files relative to the current page URL.

Dan Tang Over a year ago

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?

robertklep Over a year ago

@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.

Dan Tang Over a year ago

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: '/'})?

Collectives™ on Stack Overflow

Routing error with angular.js and express

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related