在 IIS 直接 url 上托管 Angular2 应用程序后不起作用 [英] After hosting Angular2 app on IIS direct url is not working

查看:22
本文介绍了在 IIS 直接 url 上托管 Angular2 应用程序后不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们已经开发了 Angular2 应用程序.

We have developed Angular2 App.

当我们在带有 'ng serve' 的 angular-cli 下运行时它工作正常.

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

一旦我们将应用托管到 IIS 7.5,我们就可以毫无问题地浏览到应用的根目录,并且可以从创建的应用导航导航到任何其他视图.

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.

但是当用户尝试加载针对特定路由或组件的 url 时,问题就开始了.

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

所以如果我们去http://serverurl ...它会加载索引.html 然后点击 index.html 上的导航链接,用户会转到 http://serverurl/路由 1/组件 1

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

但是当用户尝试访问 url http://serverurl/route1/component1 直接在浏览器地址栏中输入 http://serverurl/route1/component1,它正在将该请求发送到 IIS,然后返回并返回未找到资源的错误.

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.

而且很容易理解,服务器上不存在该网址.那是角度网址.理想情况下,它应该加载 index.html 并将 url 的其余部分传递给 angular router 并加载该 /route1/component1.这适用于ng serve",但不适用于 IIS 7.5.是否需要在 IIS 中进行任何设置才能使其正常工作?或者我必须在 Anuglar2 App 中做些什么?

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?

推荐答案

我通过执行以下步骤解决了这个问题 ..

I get this resolved by doing following steps ..

  1. https 下载的 URL Rewriter 模块://www.microsoft.com/en-au/download/details.aspx?id=7435

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

在我的 web.config 中添加以下内容

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. 在 index.html 中设置基本标签.它应该紧跟在 标签
  2. 之后
  1. Setting up base tag in index.html. It should be immediately after <head> tag

<base href="/"/>

这三个步骤将设置您在 IIS 7.5 或 IIS 8.0 上使用 html5mode url 部署 Angular2/Angular 应用程序

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.

这篇关于在 IIS 直接 url 上托管 Angular2 应用程序后不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆