By marcushaddon


2017-03-09 19:08:04 8 Comments

Problem

After setting a base tag to run Angular 1.x in HTML5 mode, the browser (Chrome) makes requests to the wrong path for scripts when accessing the app by navigating directly to localhost:3000/resource/id.

Details

I have an Angular 1 app that I have recently set to run in HTML5 mode, like so:

    $locationProvider.html5Mode(true);

I have included a base tag in the head of index.html like so:

<base href="/">

I have set up my express routes so that a request for (for example) http://localhost:3000/album/38ad87f will return index.html, like so:

    .use('/', express.static(__dirname + '/crate-frontend/app'))

// Playlist endpoints
.use('/api/playlists', playlistRoutes)

// Album endpoints
.use('/api/album', albumRoutes)

// Artist endpoints
.use('/api/artist', artistRoutes)

// Track endpoints
.use('/api/tracks', trackRoutes)

// User endpoints
.use('/api/user', userRoutes)

// Discogs proxy endpoints
.use('/api/discogs', discogsRoutes)

// Youtube proxy endpoints
.use('/api/youtube', youtubeRoutes)

// Search endpoints
.use('/api/search', searchRoutes)

// For serving up crate-frontend/app/index.html
.all('/*', function(request, response){
    response.sendFile(__dirname + '/crate-frontend/app/index.html' );
})

Now, when I go to the home page, and navigate around, everything works fine. BUT if I refresh the page that is not the root OR a copy/paste a URL like http://localhost:3000/album/38ad87f into a new window, it breaks. I can see that it receives index.html, but then when the browser requests each of the linked scripts, for example:

<script src="app.js"></script>

it actually makes a request to http://localhost:3000/album/app.js, which returns index.html.

Can someone tell me what I've missed / am doing wrong?

1 comments

@lin 2017-03-09 19:12:02

Try to include your ressources with an absolute path and you will be fine for all time.

<script src="/app.js"></script>

@marcushaddon 2017-03-09 20:11:06

Well I feel dumb but I am so glad I asked. Thank you so much!

@lin 2017-03-09 20:14:37

@marcushaddon glad to help ya.

Related Questions

Sponsored Content

7 Answered Questions

[SOLVED] Are (non-void) self-closing tags valid in HTML5?

7 Answered Questions

[SOLVED] Script Tag - async & defer

  • 2012-05-29 23:28:01
  • Adam
  • 158824 View
  • 405 Score
  • 7 Answer
  • Tags:   javascript html5

3 Answered Questions

[SOLVED] CORS issue (Express backend, Angular frontend)

  • 2018-01-03 02:04:34
  • Edwin Chua
  • 746 View
  • 1 Score
  • 3 Answer
  • Tags:   angular express

0 Answered Questions

Cross Origin Post Request Angular js

2 Answered Questions

[SOLVED] What's the difference between app.use and app.get with express.static?

  • 2014-11-27 02:17:10
  • PeterT
  • 5865 View
  • 10 Score
  • 2 Answer
  • Tags:   node.js express

1 Answered Questions

Angular2 Webpack and Express

1 Answered Questions

[SOLVED] Angular html5 mode and HAL browser

8 Answered Questions

1 Answered Questions

Sponsored Content