在IIS上托管Angular2应用程序后，直接url无效
[英]After hosting Angular2 app on IIS direct url is not working
问题描述
We have developed Angular2 App. 
我们开发了Angular2 App。
It is working fine while we are running under angular-cli with 'ng serve'. 当我们使用'ng serve'在angular-cli下运行时，它工作正常。
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. 一旦我们将应用程序托管到IIS 7.5，我们就可以浏览应用程序的根目录而不会出现太多问题，我们可以导航到创建的应用程序导航中的任何其他视图。
But issue starts when user try to load url which is targeting specific route or component. 但是当用户尝试加载定位特定路由或组件的URL时，问题就开始了。
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 因此，如果我们转到http：// serverurl ...它会加载index.html ，然后单击index.html上的导航链接，它会将用户带到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. 但是当用户尝试通过在浏览器地址栏中键入http：// serverurl / route1 / component1直接转到url http：// serverurl / route1 / component1时，它会将该请求发送到IIS，并返回并且错误，资源不是找到。
And it is easy to understand, that url is not exists on server. 并且很容易理解，服务器上不存在url。 That is angular url. 这是有角度的网址。 Ideally, it should load index.html and pass rest of the url to angular router and load that /route1/component1 . 理想情况下，它应该加载index.html并将其余的url传递给angular路由器并加载/ route1 / component1 。 And that works with 'ng serve' but does not work with IIS 7.5. 这适用于'ng serve'，但不适用于IIS 7.5。 Is there any settings I have to do in IIS to get it working ? 在IIS中我是否有任何设置才能使其正常工作？ Or in anything I have to do in Anuglar2 App ? 或者在Anuglar2应用程序中我需要做的任何事情？
Can anyone suggest me how to get this fixed? 任何人都可以建议我如何解决这个问题？
3 个解决方案
解决方案1
23 已采纳 2016-08-18 03:33:19
I get this resolved by doing following steps .. 我通过以下步骤解决了这个问题。
Downloaded URL Rewriter module from https://www.microsoft.com/en-au/download/details.aspx?id=7435
从https://www.microsoft.com/en-au/download/details.aspx?id=7435下载的URL重写器模块 Added following to my web.config
在我的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>
- Setting up base tag in index.html. 在index.html中设置基本标记。 It should be immediately after <head> tag 它应该在<head>标签之后立即显示
<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 这三个步骤将指导您在IIS 7.5或IIS 8.0上使用html5mode url部署Angular2 / Angular App
Hope this will help. 希望这会有所帮助。 I have to go through few answers to get this one resolved. 我必须通过几个答案来解决这个问题。
解决方案2
1 2017-05-08 06:23:38
An even simpler change worked for me, using Angular 4.0 and IIS 6.1. 使用Angular 4.0和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: 我刚刚将基础href从'/'更改为我的app文件夹的名称：
<head>
<base href="MyApp">
...
Hope this works for others! 希望这对其他人有用！
解决方案3
0 2018-10-06 17:58:46
[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 [windows hosting]创建文本文件并将其命名为“ web.config ”打开它并通过下面的内容然后确保它位于您托管的根目录中
<?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! 最好的运气:)当我节省别人的时间时，这是有益的！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.