Angular 9：如何在路由中使用 $localize

Question

我正在使用 "@angular/localize": "^9.0.2" 并且我有一条带有动态标题的路线，应该翻译：

const routes: Routes = [
  { path: 'overview', component: DashboardPageComponent, data: { title:  $localize`:@@overview:Overview`, breadcrumb: 'Overview' } },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

消息.es.xlf

<unit id="overview">
  <segment>
    <source>Overview</source>
    <target>Vista general</target>
  </segment>
</unit>

但是当我运行时ng serve --configuration=es，显示以下错误：

ERROR in src/app/dashboards/dashboard-routing.module.ts(8,7): Error during template compile of 'DashboardRoutingModule'
  Reference to a local (non-exported) symbols are not supported in decorators but 'routes' was referenced
    Consider exporting 'routes'.

此外，我阅读了文章：https://blog.ninja-squad.com/2019/12/10/angular-localize/寻找解决方法，例如：

ERROR in src/app/dashboards/dashboard-routing.module.ts(8,7): Error during template compile of 'DashboardRoutingModule'
  Reference to a local (non-exported) symbols are not supported in decorators but 'routes' was referenced
    Consider exporting 'routes'.

但在这种情况下，$localize:@@overview:Overview始终显示“概述”，但不显示messages.es.xlf翻译。知道如何使用 $localize 来翻译这个标题吗？