Angular Universal 和预渲染路由

Question

我只是在看一个解释 Angular Universal 的视频，它实际上教会了我一些我不知道的东西。您可以将路由添加到将被预渲染的 angular.json 文件。这对我来说很棒，因为很多路由都路由到同一个组件，但使用无头 CMS 来生成内容。 所以我在 angular.json 中更新了我的 routes 数组，如下所示：

"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "browserTarget": "sxp-marketing-website:build:production",
    "serverTarget": "sxp-marketing-website:server:production",
    "routes": [
      "/contact",
      "/contact/thankyou",
      "/innovation-directory",
      "/locations",
      "/managed-service",
      "/pricing",
      "/unconfirmed"
    ]
  },
  "configurations": {
    "production": {}
  }
},

不错；然后我运行npm run prerender，它确实生成了我的文件：

真的很好，所以我立即运行了npm run serve:ssr，然后我将浏览器导航到 http://localhost:4000 并浏览了我的网站。在我正在观看的视频中，它指出当您遍历您的路线时，如果您查看 chrome 中的 elements 选项卡并滚动到底部，您会看到如下评论：

我的问题是我不是。事实上，它似乎只是使用了困扰我的普通客户端版本（当然还有 SSR）。

我正在查看的页面是 http://localhost:4000/managed-service，它在我的 angular.json 文件中明确定义。我记得预渲染文件是在以路由命名的文件夹中生成的，它实际上是一个 index.html 文件，所以我将我的 url 更新为 http://localhost:4000/managed-service/index.html 并将路由更改回 @ 987654330@ 但它确实显示了评论。

我现在想知道我的 web.config 是否有问题；也许它没有正确路由。或者也许我缺少一些东西。

谁能帮忙？

PS：这是我的 web.config 文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
            <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
        </staticContent>
        <webSocket enabled="false" />
        <handlers>
            <add name="iisnode" path="main.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
            <rules>
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^main.js\/debug[\/]?" />
                </rule>
                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}"/>
                </rule>
                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                    </conditions>
                    <action type="Rewrite" url="main.js"/>
                </rule>
                <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>
        <security>
            <requestFiltering>
                <hiddenSegments>
                    <remove segment="bin"/>
                </hiddenSegments>
            </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough" />
    </system.webServer>
</configuration>

Answer 1

您需要运行npm run app-name:prerender 或yarn prerender，然后使用此命令node dist/{app-name}/server/main.js 运行在dist/{app-name}/server/.main.js 创建的服务器文件。

运行 npm run dev:ssr 实际上会重建应用程序并覆盖您之前创建的预渲染文件。

见：https://github.com/mgechev/hybrid-rendering

从npm run prerender 构建的main.js 服务器文件配置为提供混合应用程序。 npm run dev:ssr 将构建一个仅对您的应用进行 SSR 的服务器文件。