Question: Refreshing page shows file not found error how to resolve using [angular js + NodeJS/ExpressJS ]

Question

Refreshing page shows file not found error how to resolve using [angular js + NodeJS/ExpressJS ]

Answers 1
Added at 2017-01-02 07:01
Tags
Question

Note: i tired all questions & answer related this topic. Like This and i tried related questions and try to solve it but not success.

I am build angularJS web-app. Its purely based on AngularJS/HTML5 and NodeJS/ExpressJS and Database side use mongo DB then this problem occures.

I want To '#' remove in url and i refresh page then display my current page .But right now display "Not Found 404".i use like this $locationProvider.html5Mode(true); and <base href="/" /> but i am not success.

i know remove # in URL solution is $locationProvider.html5Mode(true);and <base href="/" /> But i use NodeJS/ExpressJS then i can't use.

My Url

http://localhost:3000/Tutorial/Routing/StateProvider/index.html#/Setting/StudenList

I want to URL

http://localhost:3000/Tutorial/Routing/StateProvider/index.html/Setting/StudenList

Notes:

Without this Solution $locationProvider.html5Mode(true);and <base href="/" /> But i use NodeJS/ExpressJS Then i want to remove # and refreshing page issue solve

Answers
nr: #1 dodano: 2017-01-02 07:01

This is because the web server receiving the request looks for a resource matching the full url on the server, which doesn't exist because the angular portion of the url refers to a route in your angular application and needs to be handled in the client browser

The way to fix this is by rewriting all virtual urls to the main angular index.html file

AngularJS + NodeJS/ExpressJS - Routes to prevent 404 error after page refresh in html5mode

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

AngularJS + IIS - URL Rewrite Rule to prevent 404 error after page refresh in html5mode (for apache click here)

<rewrite>
  <rules>
    <rule name="AngularJS" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

Referred from

additional way to fix this

http://stackoverflow.com/a/34817349/2218635

Source Show
◀ Wstecz