Question

我有简单的angular2-cli应用程序（一页有模型驱动形式 - 不涉及路由器）。随着＆＃34; ng服务＆＃34;一切正常。我用ng build --product制作了生产版本。我将所有./dist文件夹内容复制到C：\ inetpub \ wwwroot下的新文件夹中。我从IIS管理控制台制作了虚拟应用程序。 Defualt应用程序文件是index.html。我浏览到app uri，我只得到＃34;正在加载...＆＃34;页面。我尝试没有--product开关（只有ng build）的构建，但结果是一样的。 Angular app未加载。还有什么需要在IIS上发布角度应用程序吗？

Answer 1

Here is how I solve this situation;

Create project with angular-cli
Build your application with ng build
Open IIS, create new virtual directory and show dist folder
Set base href in your index.html from / to /yourAliasNameOnIIS

Use this web.config for redirecting requests to your index.html page

<system.webServer>
<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/yourAliasNameOnIIS" />
    </rule>
  </rules>
</rewrite>

Convert your virtual directory to a web application

You can also use ng build --deploy-url "/yourAliasNameOnIIS" to change src path in dist/index.html.

I hope it helps!

Answer 2

当您打开浏览器的开发工具时，当应用程序尝试下载js，css等文件时，您会看到404条消息

您需要将index.html中的基本href设置为

<base href="./">

这将确保base ref与您的网站在IIS中的位置相关。您还需要使用散列位置策略，否则IIS将拦截您的ng2路由器URL更改并尝试查找URL的控制器/操作。

在app.module.ts的导入下：

RouterModule.forRoot(routerConfig, { useHash: true })

我已经完成了这两个步骤，并且所有这些都在使用IIS的Azure VM上完美运行。这样做也意味着您不必将SPA放在根目录上，并且可以让多个SPA快乐地彼此相邻运行（在IIS上的不同网站中）

Answer 3

对我来说，这非常简单：

运行ng build命令。它将生成dist文件夹。
在 index.html 文件中生成 href =＆＃34;＆＃34; 。
将dist文件夹路径提供给IIS应用程序，它将起作用。

这使得它更简单，您无需修改 index.html 文件：

ng build -prod --base-href

Answer 4

我提到了许多建议，对我有用的是link

这里有一个很好的解释，为什么需要以不同的方式为Angular应用程序配置事物。按照链接中的步骤操作，然后使用以下设置在已发布的文件文件夹位置添加了web.config：

<?xml version="1.0"?>
<configuration>
<system.webServer>  
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
  </rewrite>
 </system.webServer>
</configuration>

上面的链接中也描述了这些设置。希望这有助于某人。

Answer 5

我尝试了以下方法。

在IIS中创建新网站（通过inetmgr）
使用“ng build --prod” - 生成生产版本代码
复制dist文件夹的文件，然后将其粘贴到IIS网站的根文件夹中（不要复制文件夹并将其放入IIS网站的根文件夹中，这会导致问题）
从您的结尾设置凭据，授权等....
设置根文件夹对“MACHINE_NAME \ IIS_IUSRS＆amp; MACHINE_NAME \ NETWORK SERVICE”的访问权限
在IIS
现在您可以浏览网站了。

Answer 6

除了ulubeyn的回答主要对我有用之外，我还添加了自己的IIS重写规则来启用：

1）从/ dist到别名的初始重定向 2）从别名下载Javascript和 3）别名上的角度路由

<rules>
  <rule name="Redirect from blank URL to IIS Alias" stopProcessing="true">
    <match url="^/?$" />
    <action type="Rewrite" url="/MyDist" />
  </rule>
  <rule name="Redirect from /dist folder to IIS Alias" stopProcessing="true">
    <match url="^(.*)/dist" />
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Allow Angular URL Routing on IIS Alias" stopProcessing="true">
    <match url="^yourAliasNameOnIIS/*" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Redirect to IIS Alias folder with parameters" stopProcessing="true">
    <match url="(.*)" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS/{R:1}" appendQueryString="true" />
  </rule>
</rules>

Answer 7

对于使用angular i18n的用户，您必须针对每种语言构建应用程序并将其放在单独的文件夹中

ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/

这是iis的配置

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
  <system.webServer>
    <directoryBrowse enabled="true" />
    <rewrite>
        <rules>
            <rule name="Imported Rule 1" stopProcessing="true">
                <match url="^../index\.html$" ignoreCase="false" />
                <action type="None" />
            </rule>
            <rule name="Imported Rule 2" stopProcessing="true">
                <match url="(..)" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="{R:1}/index.html" />
            </rule>
            <rule name="Imported Rule 3">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^fr" />
                </conditions>
                <action type="Redirect" url="/fr/" redirectType="Found" />
            </rule>
            <rule name="Imported Rule 5">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" negate="true" />
                </conditions>
                <action type="Redirect" url="/en/" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>
 </system.webServer>
 </configuration>

Answer 8

您可以部署它而无需任何Web.config文件，如下所示，

您可以在index.html标签的dist文件夹中找到base href

现在相应地更改其路径

Ex-：如果部署在wwwroot中

<base href="/">

Ex-：如果部署在wwwroot中的文件夹内

<base href="/FolderName/">

Answer 9

将web.config文件添加到位置app / src / 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>

在.angular-cli.json中，将web.config添加到资产部分，如下所示：

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],

Answer 10

在IIS上，您必须将web.config复制到部署的文件夹：

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

<system.webServer>
  <security>
    <requestFiltering>
      <fileExtensions>
        <add fileExtension=".json" allowed="true" />
        <add fileExtension=".woff2" allowed="true" />
      </fileExtensions>
    </requestFiltering>
  </security>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="application/json" />
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
  <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>

您可以像这样自动执行，在src中创建web.config文件，然后将其添加到.angular-cli.json：

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],

Answer 11

对我有用且非常容易的是首先配置我的路线

RouterModule.forRoot([
--some routes-- 
], { useHash: true })

所以我所有的路线前面都有 # 然后使用

ng build --base-href "./" --prod

在 wwwwroot 内的文件夹中构建并部署我的应用程序。

Answer 12

请按照以下步骤操作：

在命令下运行。 [ng build --prod --base-href='/']
创建一个文件夹，即“D:\SmartTrader-Angular”
将 dist 内容复制到 D:\SmartTrader-Angular 文件夹
创建 IIS 站点
无需创建 web.config 文件。
在 IIS 中重新启动站点。
它现在应该可以工作了。

如何在iis上部署angular-cli app

12 个答案: