在 Angular cli 中，如何将元数据添加到路由，例如标题和描述标签答案

【问题标题】：In angular cli how can you add meta data to routes e.g. title and description tags在 Angular cli 中，如何将元数据添加到路由，例如标题和描述标签
【发布时间】：2017-09-09 18:38:40
【问题描述】：

在 Angular cli 中，如何将元数据添加到路由，例如标题和描述标签？

这些是我的路线：

import { Route} from '@angular/router';
import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

我想为这些路线添加标题和描述，以便在浏览器中看到它们，例如每条路线的标题。

此外，我希望它们被机器人拾取，例如谷歌搜索引擎优化机器人。

我正在使用带有 webpack、角度版本 4 和 typescript 的 angular cli。

当前错误：

【问题讨论】：

Route 上有一个 data 属性。这可能值得研究。其定义为：data是通过ActivatedRoute提供给组件的附加数据。不管什么意思。 :) 在 angular.io 上找不到一个很好的例子。

标签： angular webpack angular-cli reflect-metadata

【解决方案1】：

有一个 npm 模块 ng2-metadata [https://www.npmjs.com/package/ng2-metadata] 它将满足需求。

示例代码。

export const routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      metadata: {
        title: 'Sweet home',
        description: 'Home, home sweet home... and what?'
      }
    }
  },
  {
    path: 'duck',
    component: DuckComponent,
    data: {
      metadata: {
        title: 'Rubber duckie',
        description: 'Have you seen my rubber duckie?'
      }
    }
  },
  {
    path: 'toothpaste',
    component: ToothpasteComponent,
    data: {
      metadata: {
        title: 'Toothpaste',
        override: true, // prevents appending/prepending the application name to the title attribute
        description: 'Eating toothpaste is considered to be too healthy!'
      }
    }
  }
  ...
];

在 app.module.ts 中添加这个

 imports: [
    ...
    RouterModule.forRoot(routes),
    MetadataModule.forRoot()
  ],

并将其注入组件构造函数中。

  constructor(private metadataService: MetadataService) { }

【讨论】：

谢谢，我需要添加到 angular cli Json 文件中的链接是什么？
答案中提到了链接，在 angular-cli.json 中包含这个 js node_modules/ng2-metadata/bundles/ng2-metadata.umd.min.js
我已将该链接：node_modules/ng2-metadata/bundles/ng2-metadata.umd.min.js 添加到 angular-cli.json 的脚本部分。但是当我执行这个 bash 命令时：“ng build --prod --aot --output-hashing=none”我得到这个错误：“多脚本加载器中的错误”
它仅在我执行 ng serve 而不是 ng build 时才有效 --prod --aot --output-hashing=none 我现在附上了上面的屏幕截图
检查npmjs.com/package/ng2-metadata是否有为AOT编译定义的函数。

【解决方案2】：

作为作者 ng2-metadata 和 @ngx-meta/core 项目，我建议你看一下包说明（README 文件），因为 README 文件在大多数情况下都包含最新信息。

ng2-metadata 的 npm page 上有一个贬值警告，表示该项目已弃用，不再维护，现在在 @ngx-meta/core 继续。

如果您使用 @ngx-meta/core 进行切换，您会注意到您在此处描述的当前问题已经得到解决。

关于@ngx-meta/core：@ngx-meta/core是ng2-metadata的继承者，实际发布的是@987654331 @ 和 v0.2.x。

如果您使用的是@angular v4.x.x，请使用最新版本的v0.4.x（[master] 分支）。

截至目前，Angular 4 的最新版本是 v0.4.0-rc.1。

如果您使用的是@angular v2.x.x，请使用最新版本的v0.2.x（[v0.2.x] 分支）。

截至目前，Angular 2 的最新版本是 v0.2.0-rc.5。

【讨论】：