如何在iis上部署angular-cli app

Question

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

Answer 1

这是我如何解决这种情况;

• 使用angular-cli创建项目
• 使用构建应用程序 ng build
• 打开IIS,创建新的虚拟目录和显示dist文件夹
• base href在index.html中设置/为/yourAliasNameOnIIS

• 使用此web.config将请求重定向到index.html页面

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

• 将虚拟目录转换为Web应用程序

您还可以使用ng build --deploy-url "/yourAliasNameOnIIS"更改src路径dist/index.html.

我希望它有所帮助!

Answer 2

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

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

<base href="./">

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

在app.module.ts的导入下:

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

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

Answer 3

对我来说，这很简单：

1. 运行ng build命令。它将生成dist文件夹。
2. 让HREF =“”中的index.html文件。
3. 将dist文件夹路径提供给IIS应用程序，它将起作用。

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

ng build -prod --base-href

Answer 4

我尝试了下面的方法，它有效。

1. 在 IIS 中创建新网站（通过 inetmgr）
2. 使用“ng build --prod” - 生成生产版本代码
3. 复制 dist 文件夹的文件，然后将其粘贴到 IIS 网站的根文件夹中（不要复制该文件夹并将其放入 IIS 网站的根文件夹中，这会导致问题）
4. 从您的一端设置凭据、授权等。
5. 设置“MACHINE_NAME\IIS_IUSRS & MACHINE_NAME\NETWORK SERVICE”根文件夹的访问权限
6. 在 IIS 中将默认页面设置为“index.html”
7. 现在您可以浏览该网站了。