Angular 通用路由和预渲染路由

如何解决Angular 通用路由和预渲染路由

我只是在看一个解释 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 中的 元素 选项卡并滚动到底部，您将看到如下评论：

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

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

我现在想知道我的 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>

解决方法

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

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

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

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