使用Angular Universal在Angular中执行服务器端渲染时，无法在页面重定向后查看html源代码

我正在开发一个Angular博客应用程序，我已经在我的博客应用程序中实现了服务器端渲染。我遇到的问题是，在我的博客主页上，我可以通过单击Node.js API中的Ctrl+u来查看所有包含源代码内容的博客，单击所选博客后，它将重定向到该博客并显示其内容，但不显示HTML源代码（它存储在本地存储中以减少API调用，我从本地存储中获取它以显示选定的博客内容）

我还了解到SSR不支持窗口、文档和位置对象，本地存储是一个窗口属性，因此我必须遵循以下链接

在完成了所有的教程和文档之后，我已经尝试了所有可能的方法，但是没有成功。我们将感谢您的帮助。提前谢谢

下面是我的代码附件

Home Component.html

<owl-carousel-o [options]="bannerSlider">
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class="penci-image-holder" src="{{recentPost[0]?.featured_image}}">
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[0])">{{recentPost[0]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[0]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[1]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[1])">{{recentPost[1]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[1]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[0]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[0])">{{recentPost[0]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[0]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[1]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[1])">{{recentPost[1]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[1]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
  </owl-carousel-o>

<div class="largeblog-area">
                        <div class="largeblog-content blogdetailtop">
                            <h6><a href=""> {{post?.category}} </a> </h6>
                            <h2>{{post?.title}}</h2>
                            <h5><span>written by {{post?.author}} </span> |
                                <span>{{post?.post_date * 1000 | date:'mediumDate'}}</span> </h5>
                        </div>


                        <div class="largeblogimg"><img alt="img" src="{{post?.featured_image}}"></div>
                        <div class="largeblog-content">
                            <p [innerHTML]="post?.description"></p>

                            <div class="post-tags">
                                <a href="#">fresh</a>
                                <a href="#">life</a>
                                <a href="#">style</a>
                                <a href="#">travel</a>
                            </div>


                        </div>

                        <div class="largeblog-bottombox">
                            <div class="largeblog-date">
                                <span><i class="fa fa-clock-o" aria-hidden="true"></i> July 5, 2017</span>
                            </div>
                            <div class="largeblog-social">
                                <ul>
                                    <li><a href="" title="Like"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
                                    </li>
                                    <li><a href="" title="Facebook"><i class="fa fa-facebook"
                                                aria-hidden="true"></i></a> </li>
                                    <li><a href="" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                    </li>
                                    <li><a href="" title="Pinterest"><i class="fa fa-pinterest"
                                                aria-hidden="true"></i></a> </li>
                                </ul>
                            </div>


                        </div>
 </div>

BlogPost组件.html

<owl-carousel-o [options]="bannerSlider">
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class="penci-image-holder" src="{{recentPost[0]?.featured_image}}">
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[0])">{{recentPost[0]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[0]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[1]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[1])">{{recentPost[1]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[1]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[0]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[0])">{{recentPost[0]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[0]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[1]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[1])">{{recentPost[1]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[1]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
  </owl-carousel-o>

<div class="largeblog-area">
                        <div class="largeblog-content blogdetailtop">
                            <h6><a href=""> {{post?.category}} </a> </h6>
                            <h2>{{post?.title}}</h2>
                            <h5><span>written by {{post?.author}} </span> |
                                <span>{{post?.post_date * 1000 | date:'mediumDate'}}</span> </h5>
                        </div>


                        <div class="largeblogimg"><img alt="img" src="{{post?.featured_image}}"></div>
                        <div class="largeblog-content">
                            <p [innerHTML]="post?.description"></p>

                            <div class="post-tags">
                                <a href="#">fresh</a>
                                <a href="#">life</a>
                                <a href="#">style</a>
                                <a href="#">travel</a>
                            </div>


                        </div>

                        <div class="largeblog-bottombox">
                            <div class="largeblog-date">
                                <span><i class="fa fa-clock-o" aria-hidden="true"></i> July 5, 2017</span>
                            </div>
                            <div class="largeblog-social">
                                <ul>
                                    <li><a href="" title="Like"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
                                    </li>
                                    <li><a href="" title="Facebook"><i class="fa fa-facebook"
                                                aria-hidden="true"></i></a> </li>
                                    <li><a href="" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                    </li>
                                    <li><a href="" title="Pinterest"><i class="fa fa-pinterest"
                                                aria-hidden="true"></i></a> </li>
                                </ul>
                            </div>


                        </div>
 </div>

---

仅当您的express服务器未崩溃时，SSR才会显示视图源。SSR不支持浏览器中提供的窗口和文档对象

如果您使用ServiceWorker进行缓存，即使这样，它也不会显示视图源，因为它将从ServiceWorker提供服务

---

因此，您必须在两个位置进行检查，如果它是否从服务人员处获得服务，则检查您的服务器是否在终端中显示生成的HTML。

现在，当我使用服务获取该组件中唯一选定的博客时，我的HTML源代码会显示出来，但在使用本地存储时，它不起作用。我使用的是本地存储由于以下原因：1.为了减少API调用2.我希望我的路线中有缩写标题。Localstorage解决方案不适用于SSR，您必须提出不同的策略。您可以在URL中嵌入数据，而不是标题。如果您可以提供一些您建议的策略示例链接，这将非常有用。我将无法共享例如，这是您的用例的一个问题。您可以做的是创建一个回退到您的服务的回退，该回退将获取日志详细信息。首先检查本地存储是否可用（如果可用），然后您可以使用该存储，或者使用该服务