After hosting Angular2 app on IIS direct url is no

2019-02-01 07:44发布

站内问答 / Angular
1443 3 4

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?

3条回答
爷、活的狠高调
2楼-- · 2019-02-01 08:25

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.

查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
3楼-- · 2019-02-01 08:30

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

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
4楼-- · 2019-02-01 08:31

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!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)