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

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

• javascript
• angularjs
• express

2 Answers 2

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

Try using the base tag :

<base href="/" />

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