Is there is any method to remove # for url of angular application without using url rewrite in server side?

Question

I am seeing example explaining that we can rewrite the angular application url by .

placing

<base href="/">

and then in route

$locationProvider.html5Mode({ enabled: true });

and the # get removed but when i refresh the page it says page not found .

So the next step is to rewite the url in server side by node.js , iis or server side technologies which fixed this issue .

http://jasonwatmore.com/post/2016/07/26/angularjs-enable-html5-mode-page-refresh-without-404-errors-in-nodejs-and-iis

Is there is any method without using server i can do it in angular end only?

Answer 1

The answer to the question is: No.

The AngularJS Documentation clearly states that HTML5 mode requires URL rewriting.

From the Docs:

HTML5 Mode

Server side

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a <base> tag is also important for this case, as it allows AngularJS to differentiate between the part of the url that is the application base and the path that should be handled by the application.

— AngularJS Developer Guide - Using $location (HTML5 Mode Server Side)

For angular applications running under NodeJS and ExpressJS

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;

For angular applications running under IIS on Windows

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

Answer 2

Yes, I had a lot of issues dealing with IIS and URL rewrites and eventually decided to just handle them from within my app.

In my global.asax file - which is in vb - I added:

Private Const ROOT_DOCUMENT As String = "~/client/index.html"

Then I added:

 Protected Sub Application_BeginRequest(sender As [Object], e As EventArgs)
    Dim url As String = Request.Url.LocalPath
    If Not System.IO.File.Exists(Context.Server.MapPath(url)) And Not (url.IndexOf("/odata/") >= 0 Or url.IndexOf("/api/") >= 0) Then
        Context.RewritePath(ROOT_DOCUMENT)
    End If
 End Sub

So basically, if the URL doesn't map to a file and it's not a call to my data store or API, I just let Angular handle it on the client side. It works very well.