不能使用在 "CoreModule" 中声明的组件，但可以使用服务

Question

我正在尝试遵循 angular 文档，以便我只有一个特定模块的实例。特别是 CoreModule and the SharedModule 部分。

上面链接底部的演示仅适用于在 AppModule 中导入一次 CoreModule，其中延迟加载的 HeroesModule 和 HeroComponent 可以引用 UserService 在 CoreModule

中声明

我的问题是在尝试使用已声明并从 "CoreModule" 中导出的组件时出现的。

例如，默认 HeroComponent 的工作方式如下：

// Exact copy except import UserService from core
import { Component }   from '@angular/core';

import { HeroService } from './hero.service';
import { UserService } from '../core/user.service';

@Component({
  template: `
    <h2>Heroes of {{userName}}</h2>
    <router-outlet></router-outlet>
  `,
  providers: [ HeroService ]
})
export class HeroComponent {
  userName = '';
  constructor(userService: UserService) {
    this.userName = userService.userName;
  }
}

但如果我修改它以包含 CoreModule 中声明的 app-title 组件，它会因错误 'app-title' is not a known element

而中断

// Exact copy except import UserService from core
import { Component }   from '@angular/core';

import { HeroService } from './hero.service';
import { UserService } from '../core/user.service';

@Component({
  template: `
    <h2>Heroes of {{userName}}</h2>
    <router-outlet></router-outlet>
    <app-title></app-title>
  `,
  providers: [ HeroService ]
})
export class HeroComponent {
  userName = '';
  constructor(userService: UserService) {
    this.userName = userService.userName;
  }
}

我从下面的 angular.io 文档中复制了示例，并且只修改了 app/hero/hero.component.ts 模板以包含 <app-title></app-title>、

示例：在应用加载后单击 "Heroes" 按钮

https://plnkr.co/edit/SZOEvdRCT23S4DfbGmut?p=preview

编辑：第二个示例，在应用加载后单击 "Contact"

https://stackblitz.com/edit/angular-2ym6ya?file=contact/contact.component.html

任何关于从 CoreModule 获取组件以在延迟加载模块中工作的建议，或关于为什么我不希望它工作的信息，将不胜感激。