Angular2 路由器：找不到加载“HomeComponent”的主要出口答案

【问题标题】：Angular2 Router: Cannot find primary outlet to load 'HomeComponent'Angular2 路由器：找不到加载“HomeComponent”的主要出口
【发布时间】：2016-11-08 14:02:14
【问题描述】：

尝试切换到新路由器，如版本 "@angular/router": "3.0.0-beta.2" 与 "@angular/*": "2.0.0-rc.4" 的组合，遵循ComponentRouter 上的官方文档。

但是，我在尝试使用默认 HomeComponent 加载我的应用时遇到了问题：

Cannot find primary outlet to load 'HomeComponent'

这似乎与使用 templateUrl 和外部 html 文件而不是使用内联模板样式有关。

HomeComponent 最初没有显示在 Window 中，错误会打印到控制台。但是，当我使用 Home 组件的链接时，它会显示为二手。

一旦我改变了

templateUrl: 'home.html'

到

template: '<router-outlet></router-outlet>'

错误消失，显示 HomeComponent 并且路由按预期工作。

这是一个已知问题吗？它适用于使用 templateUrl 的人吗？有什么我必须尊重的东西才能让它发挥作用吗？

【问题讨论】：

您能否显示主组件的组件元数据，看起来您正在提供相对 URL 但未设置模块 ID。模块 ID：模块 ID。 blog.thoughtram.io/angular/2016/06/08/…
我当然可以：@Component({ selector: 'app', directives: [ ROUTER_DIRECTIVES ], templateUrl: '/app/components/app/app.html' }) 和 @Component ({ selector: 'start.home', directives: [], templateUrl: '/app/components/start/page.home.html' }) 所以这应该不是问题
模板 URL 确实有效。这是一些设置问题，您确定您在正确的位置添加了路由器指令和路由器插座。提供一个plunker
是的。在 Plunkr 工作。
ROUTER_DIRECTIVES in @Component({directives: [AnimatedImages, ROUTER_DIRECTIVES]}) 是绝对需要的，因为它解决了出口标签

标签： angular angular2-router angular2-router3

【解决方案1】：

问题是，由于应用程序加载屏幕，<router-outlet></router-outlet> 有时还不存在，因为竞争条件。如果需要隐藏包含 outlet 的 html 部分，请使用 [hidden] 而不是 *ngIf，以确保 outlet 始终在 DOM 中，而不是有条件地删除。

【讨论】：