在IIS中托管时，Angular Universal应用程序不显示服务器端

Question

我有一个Angular Universal应用程序。我使用Visual Studio代码构建应用程序，当我使用npm run build:ssr && npm run serve:ssr本地运行应用程序时，应用程序工作得很好。当页面加载时，我可以看到所有的css、html和其他相关内容，当我查看html page.Also的源代码时，dist文件夹中包含了运行所需的所有文件。

但是，当我复制dist文件夹并在IIS网站中部署时，它总是显示代码的客户端。这意味着，当我查看所呈现的html页面的源代码时，它有approot标签和其他javascript文件。这表明，它显示的是客户端包，而不是服务器端内容。IIS结构如下所示：

​

​

我有IISNODE，URL重写都安装在服务器上。服务器为Windows Server 2016。

注意:我认为服务器工作得很好。因为我能够在同一台服务器上部署一些示例Angular Universal应用程序，它们加载服务器端的内容。我的猜测是，这与这个特定的应用程序有关。不幸的是我想不出来。

感谢任何人的帮助。

谢谢，Jaleel

Answer 1

您可以按照以下步骤在iis中部署应用程序：

1)执行以下命令，检查app是否在本地运行：

ng serve --open

2)运行NodeJs命令提示符

3)导航到您的Angular Project文件夹

4)执行npm run build:ssr

5)您将在项目文件夹中看到dist文件夹

6)转到你的windows服务器并创建一个空文件夹(例如命名为ng-ssr )

7)复制到dist文件夹到ng-ssr

8)打开ng-ssr/dist/server文件夹，打开main.js文件

9)复制main.js并直接粘贴到ng-ssr文件夹中

10)在ng-ssr文件夹中创建web.conifg文件，并在其中添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>        
      <handlers>
        <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
      </handlers>
      <rewrite>
        <rules>
            <rule name="DynamicContent">
                 <match url="/*" />
                 <action type="Rewrite" url="main.js"/>
            </rule>
            <rule name="StaticContent" stopProcessing="true">  
                  <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
                  <action type="None" />
            </rule>  
       </rules>
      </rewrite>
        <staticContent>
          <clientCache cacheControlMode="UseMaxAge" />
          <remove fileExtension=".svg" />
          <remove fileExtension=".eot" />
          <remove fileExtension=".ttf" />
          <remove fileExtension=".woff" />
          <remove fileExtension=".woff2" />
          <remove fileExtension=".otf" />
          <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
          <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
          <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
          <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
          <mimeMap fileExtension=".otf" mimeType="application/otf" />
         </staticContent>      
    </system.webServer>
  </configuration>

11)现在您的网站文件夹必须如下所示

​

​

12)在IIS中创建网站

13)在IIS中，转到您创建的网站的应用程序池，将.Net框架版本更改为无托管代码

现在您可以访问该站点了。

Deploy Angular Universal to IIS