Angular2 SEO 标签和预渲染答案

【问题标题】：Angular2 SEO tags and prerenderingAngular2 SEO 标签和预渲染
【发布时间】：2017-10-31 10:44:48
【问题描述】：

我创建了 Angular2 (Angular 4.4.3) 应用程序，其中包含通过 API 加载的动态内容。

我使用官方文档来设置标题和元数据（在 v4 中添加）： https://angular.io/guide/set-document-title https://angular.io/api/platform-browser/Meta

我已经使用本指南来创建预渲染服务器： https://blog.pusher.com/make-angular-4-app-seo-friendly/ （跳至：创建 Express 服务器以使您的 Angular 应用 SEO 友好）

但它不像描述的那样工作。例如，在 AppComponent.ts 中

export class AppComponent implements AfterViewInit {

  constructor(public router: Router,
              private activatedRoute: ActivatedRoute,
              private titleService: Title) {
    this.titleService.setTitle("SOME CUSTOM TITLE");
  }

当我打开页面时，我看到在浏览器中设置为标题，但是在打开页面源时，我看到：

我也使用了常规构建和 AOT 构建，但同样的事情，这里是 conf： tsconfig-aot.json：

{
      "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2015", "dom"],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "typeRoots": [
          "./node_modules/@types/"
        ]
      },

      "files": [
        "src/app/app.module.ts",
        "src/main.ts"
      ],

      "angularCompilerOptions": {
        "genDir": "aot",
        "skipMetadataEmit" : true
      }
    }
tsconfig.app.json
    {
      "extends": "../tsconfig-aot.json",
      "compilerOptions": {
        "outDir": "../out-tsc/app",
        "baseUrl": "./",
        "module": "es2015",
        "types": []
      },
      "exclude": [
        "test.ts",
        "**/*.spec.ts"
      ]
    }

如何从 AppComponent 或其他子组件（如果可能的话）设置元标题/描述，以便在源代码中或在 google 抓取网站时可见？

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

实际上，从服务器提供内容时出现了问题。我曾尝试直接使用 Nginx 提供内容，但问题是该节点应首先运行服务器包，然后仅作为代理与 Nginx 连接。

【讨论】：