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

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


Show source
| javascript   | angularjs   | node.js   | express   2017-01-02 07:01 2 Answers

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

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

  2. 2017-01-09 16:01

    This is what I have for my app.

    From the API docs for HTML5 mode

    if (HTML5 mode is) enabled and requireBase are true, and a base tag is not present, an error will be thrown when $location is injected.

    So, you need the base tag. I've tried without the base tag and requireBase to be false but it still seems to throw an error for me.

    index.html

    <head>
        <base href="/">
    </head>
    

    app.route.js[Angular.js]

    app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    
        // This removes '#' and makes URL pretty
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true
        });
    
        // Default path if nothing is matched. State would become 'landing'
        $urlRouterProvider.otherwise('/');
    
        $stateProvider
            .state('landing', {
                url: '/',
                templateUrl: "/dashboard/landing/templates/index.html",
                controller: 'LandingController'
            }).state('about', {
                url: '/about',
                templateUrl: "/dashboard/about/templates/index.html",
                controller: 'AboutController'
            });
    
    });
    

    Once you redirect yourself from 'landing' to 'about' state and the route changes to /about, the URL is only changed on the browser and the server does not know of this. So, when you refresh, the server does not know what /about path means. Thus, you need to redirect /about path (or any path that belongs to angular's routes) to index.html and then angular redirects you back to /about automagically.

    app.js[Express.js]

    //  dashboard route should deliver templates instead of loading angular JS app so this should come before the next one
    app.use('/dashboard', express.static(__dirname + '/public/dashboard'));
    
    // put all the API methods here and separate from the redirection to `index.html`
    app.use('/api', routes.apiRoutes); 
    
    // all the paths that do not start with `/dashboard` or `/api` is/should be angular route and thus, redirect back to `index.html`
    app.get('*', function (req, res) {
        res.sendFile(__dirname + '/public/index.html');
    });
    

    Side note

    On another app, I've seen an issue where refreshing the browser appends a trailing slash at the end of the path (/) and after the redirection, Angular app could not recognize the path from the url /about vs /about/ so it redirected me back to the landing page.

    I resolved this by adding this in app.route.js

    $urlMatcherFactoryProvider.strictMode(false);
    

    I hope this helps

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

◀ Go back