概述我创建了一个单页Angular 7应用程序，该应用程序充当网站的后端。我想从AngularJS的前端网站升级到Angular 7，但是我对SEO感到担心。归根结底，我喜欢Angular 2+和打字稿的组件结构，而不是AngularJs。由于时间限制，我现在也想避免Angular Universal。
问题就像今天一样，前端网站使用body元素上的ng-app属性在服务器端生成HTML，并生成AngularJS应用引导程序。这对SEO很有用，因为所有html都已提供/可用。当尝试使用Angular 2+时，html必须是应用程序组件模板的一部分，而我还没有弄清楚如何将应用程序组件绑定到服务器生成的html。我可以使用使用客户端模板的子组件，但是我想让大多数网站在服务器端生成，然后有一个很酷的组件库，我可以将它们简单地注入到服务器生成的html中。
我想做的事：
<!-- All the following HTML is generated on the server side (PHP)-->
<body>
<app-root>
<!-- how to tell the app component to use this html instead of whatever is compiled in Angular? -->
<div id="App Root Component">
<div>Some html</div>
<component-a tag="does some cool stuff"></component-a><!-- Angular now behaves as normal here -->
<div>Some other html</div>
<component-b tag="does other cool stuff"></component-b><!-- Angular now behaves as normal here -->
</div>
</app-root>
</body>这不起作用，因为AppComponent将使用其自己的模板覆盖其中的所有内容。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',/*The html in here will overwrite all contents within <app-root>, even if it's empty, or if this statement is omitted*/
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app-www';
}也许我正在尝试将一个方形钉插入一个圆孔中，但是在我看来，在服务器端生成大多数静态html并同时灵活地使用以下功能会很酷Angular 2+用于各种交互式组件。
很好，您关心SEO。 Angular 2+是客户端脚本框架，它将在用户的浏览器上生成HTML。当您看到源代码时，它将不会显示渲染的HTML。
Google已经开始抓取基于JS框架的网站。但是有些却不是最好的。
您从服务器端到服务器网站的解决方案可能使用Angular Universal。这会将HTML提供给浏览器，而不是在用户的浏览器中呈现。
如果您不满意，可以购买https://prerender.io/，它将在您的服务器上存储静态页面（由它们抓取），并且当bot请求该页面提供这些静态页面的时间。
我希望这能回答您的问题。