Unable to remove # in AngularJS

Question

The application is making use of the following:

AngularJS (v1.6.4)
webpack
ui-router

One requires the path to be independent of the # in the url.

For this I have added the following in the code:

In app.js

 /* in the config section */
 $locationProvider.hashPrefix('');
 $locationProvider.html5Mode(true);

In index.html

 <!-- under the head section -->
 <base href="/">

When fired in the below format from address

'http://localhost/pathName'

it gives the following error:

Cannot GET /pathName

But the same works well when accessed through hyperlinks. Also, on accessing 'http://localhost/#/pathName', the browser modifies the same to 'http://localhost/pathName'.

Is there a way by which the url can be accessed through GET request, by configuring from webpack (or some other way)?

EDIT 1:

Routing Code:

.config(($stateProvider) => {
    $stateProvider
        .state('pathName', {
            url: '/pathName',
            template: '<pathNameTemplate />'
        });
})

@Avihaym, I don't think, it is required, but still I have added. — Shashank
– Shashank, Commented May 15, 2017 at 10:02
The issue is on your server. You must configure your server to always return your base view — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented May 15, 2017 at 10:03
@DeblatonJean-Philippe, can u explain how can I do it; the application is basically a frontend itself with no server-side technologies like NodeJS, etc. — Shashank
– Shashank, Commented May 15, 2017 at 10:04
How could I help you without knowing your server? Your error happens while the javascript code has not been loaded to the browser yet. There is nothing you can do with your JS code to handle that — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented May 15, 2017 at 10:07

Petr Averyanov · Accepted Answer · 2017-05-15 10:46:01Z

1

No html5:

user types www.site.com/#/section in browser
request is sent for www.site.com (#... is ignored)
server return index.html
angular launches and see that there is # -- loads specific view

Html5:

user types www.site.com/section in browser
request is sent for www.site.com/section
server return index.html
angular launches and see that there is / -- loads specific view So server MUST return index.html for all your paths - i.e. this means that you can not make it work from file system (file://.../). You need server and configure it adding redirects

P.S. you do not need this line

$locationProvider.hashPrefix('');

answered May 15, 2017 at 10:46

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maher · Accepted Answer · 2017-05-15 14:19:08Z

This is sample to remove # from url using

AngularJs v1.5.7
ui-router v0.4.2
web.config

app.js

var app = angular.module("app", ["ui.router"]);

app.config

var config = function (locationProvider) {
    locationProvider.html5Mode(true);
}
config.$inject = ["$locationProvider"];
app.config(config);

index.html

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

If you don't use IIS Service, and use Apache service such as xamp or etc... for your localhost change it to <base href="/sample/" />

web.config

<rewrite>
  <rules>
    <rule name="Main Rule" 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>

Note: you have to add this config because without it, when # removed after refresh [F5] you lose the state.

Remember In Apache (PHP) configs are different, and users have to add the settings in the .htaccess file.

Collectives™ on Stack Overflow

Unable to remove # in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related