Angular2 SEO标签和预渲染

Question

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

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

我已使用本指南创建prerender服务器： 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设置元标题/描述，或者如果可能，从其他一些子组件设置元标题/描述，以便在源代码中可见，或者当谷歌抓取网站时？