MChaker MChaker - 4 months ago 17
Javascript Question

Angular does not run on an IIS server after removing the # symbol from the URL

I am developing a web platform using Angular JS as a client side framework and .Net as a Server side framework for creating Rest webservices.
Now, my goal is to remove the # symbol. I have followed these steps:


  1. Configure
    $locationProvider
    and set
    html5Mode
    to
    true
    .

  2. Add the
    base
    tag to
    index.html
    file (
    <base href="/">
    ).

  3. Configure the iis server for rewrite mode.



After successfully completing these steps, the # is removed from the url and I am able to navigate between routes but Angular does not run correctly (for example:
ng-show
and
ng-disabled
directives and my app's controllers are not working).

I have tried to add
angular-csp.css
to my
index.html
file and add a
ng-csp
directive to its
body
tag but the problem persists.

Is this problem related to a client side configuration (some Angular configs) or a Server side configuration (iis server configs) and how to solve it?

EDIT

The project runs correctly on my local node http server. I have tested all functionalities locally and no errors in the browser's console.

Answer

SO WEIRD! I solved the problem and I don't know how and why. I have tried to place all javascript files in different folders and I ended up with a working app once I placed them in the js folder. Locally, the app works whether all javascript files are located in the js folder or not. But when things get on the iis server, I found that it only works when javascript files are located in the js folder. I have searched a lot for a reason but nothing found.

EDIT:

Finally, I have found the reason why my app works well when I placed Javascript files in the js folder. Actually, it is not about js folder naming specifically, but it is related to a config for accepting only specific folders naming and here is my web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Angular">
                    <match url=".*\.html|css/|img/|fonts/|js/|data/|lib/|templates/|favicon.ico" negate="true" />
                    <action type="Rewrite" url="index.html" />
                </rule>
            </rules>
        </rewrite>

    </system.webServer>
</configuration>

So if I want answer myself: it is an iis server side configuration (web.config). At first I putted my javascript files in a folder called "components" which is not listed between the accepted url naming in web.config. As a result, the server wouldn't allow the access to BASE_URL/components and all javascript files in components folder won't be loaded in the browser.

Comments