12

We have developed Angular2 App.

It is working fine while we are running under angular-cli with 'ng serve'.

Once we host the app to IIS 7.5, we can browse to root of the app without much of the problem and we can navigate to whatever other views from app navigation created.

But issue starts when user try to load url which is targeting specific route or component.

so if we go to http://serverurl ... it loads index.html and then clicking on navigation link on index.html it takes user to http://serverurl/route1/component1

But when user tries to go to url http://serverurl/route1/component1 directly by typing http://serverurl/route1/component1 in browser address bar, it is sending that request to IIS, and that returns and error with resource not found.

And it is easy to understand, that url is not exists on server. That is angular url. Ideally, it should load index.html and pass rest of the url to angular router and load that /route1/component1. And that works with 'ng serve' but does not work with IIS 7.5. Is there any settings I have to do in IIS to get it working ? Or in anything I have to do in Anuglar2 App ?

Can anyone suggest me how to get this fixed?

Improve this question
1
  • Use URL Rewrite module to write a rule to redirect everything beneath a certain URL to use the content of that URL. Commented Aug 11, 2016 at 23:24

3 Answers 3

Reset to default
29

I get this resolved by doing following steps ..

  1. Downloaded URL Rewriter module from https://www.microsoft.com/en-au/download/details.aspx?id=7435

  2. Added following to my web.config

<configuration>
  <system.webServer>
    <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>
  </system.webServer>
</configuration>

  1. Setting up base tag in index.html. It should be immediately after <head> tag 

<base href="/"/>

These three steps will set you up for deployment of Angular2 / Angular App with html5mode url on IIS 7.5 or IIS 8.0

Hope this will help. I have to go through few answers to get this one resolved.

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

7 Comments

I've tried a lot of different ways of doing this and this is by far the cleanest and best way I've seen. Thanks for this!
What about if you have an existing MVC site and you want all Angular2 code to go under serverURL/Angular2 , but you want serverURL/Home/Index = MVC
Can anyone verify that this actually works in IIS8? We can get this to work in IIS7.5 but not IIS8. In IIS8, the site works fine as long as you don't try and use a saved url.
Never mind. I found out it was a problem with @angular/[email protected] so I downgraded to 3.4.3 to fix it.
Works for me, thanks! But I had the URL Rewrite module already installed. When I added the rewrite rule it wasn't working. I needed to go to "Programs and Features", find the "IIS URL Rewrite Module 2" and then call repair for this module. Now it's working!
|
1

An even simpler change worked for me, using Angular 4.0 and IIS 6.1. This allowed me to use a named site instead of the default folder or the rewriting above. I just changed the base href from '/' to the name of my app folder:

<head>
    <base href="MyApp">
...

Hope this works for others!

Improve this answer

Comments

0

[windows hosting] Create text file and call it "web.config" open it and past the content below then make sure it is in the root directory in your hosting

<?xml version="1.0" encoding="utf-8"?>
      <configuration>

      <system.webServer>
        <rewrite>
          <rules>
            <rule name="Angular Routes" 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="./index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>

      </configuration>

BEST OF LUCK :) It is rewarding when I save someone else time!

Improve this answer

1 Comment

in my case I had to put index instead of just "/" as other solutions suggested. <action type="Rewrite" url="./index.html" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.