2016-07-06 7 views
18

попытался переключиться на новый маршрутизатор, как в версии «@ angle/router»: «3.0.0-beta.2» в сочетании с «@ angular/*»: «2.0.0-rc.4», следуя официальным документам на ComponentRouter.Angular2 Router: не удается найти основной выход для загрузки «HomeComponent»

Однако я столкнулся проблемы при попытке загрузить мое приложение с HomeComponent по умолчанию:

Cannot find primary outlet to load 'HomeComponent' 

Кажется, что это связано с использованием templateUrl и внешний HTML-файл вместо того, чтобы использовать шаблон инлайн стиль.

HomeComponent первоначально не отображается в окне, и ошибка выводится на консоль. Однако, когда я использую ссылку на Home Component, она отображается второй рукой.

Как только я изменяю от

templateUrl: 'home.html' 

в

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

ошибки нет, HomeComponent показана и маршрутизация работает, как ожидалось.

Это известная проблема? Это работает для кого-то, использующего templateUrl? Есть ли что-то, что я должен уважать, чтобы заставить его работать?

+0

Можете ли вы показать метаданные компонентов для домашнего компонента, как будто вы указываете относительный URL-адрес, но не устанавливаете модуль. moduleId: module.id. http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html –

+0

Уверен я могу: '@Component ({ селектор: 'приложение', директивы: [ROUTER_DIRECTIVES], templateUrl: '/app/components/app/app.html' }) и '@Component ({ селектор: 'start.home', директивы: [], templateUrl: '/app/components/start/page.home.html' }) ', поэтому это не должно быть проблемой. –

+0

Шаблонный URL-адрес работает. Некоторые проблемы с настройкой - это то, что вы уверены, что добавили директиву маршрутизатора и маршрутизаторы в правильное место. Предоставить плунжер –

ответ

27

Проблема была в том, что из-за экрана загрузки приложения <router-outlet></router-outlet> еще не существовало, из-за состояния гонки. Если вам нужно скрыть часть html, содержащую розетку, используйте [hidden] вместо *ngIf, чтобы гарантировать, что розетка всегда находится в DOM и не удаляется условно.