angular: router-outlet on child route inside of conditional can't be found

@vsavkin This is still an issue in RC5. See this plunk.

I’ve simply wrapped the router-outlet from the example in the documentation.

<div *ngIf="test">
  <router-outlet></router-outlet>
</div>

When test is falsy, the router fails with: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HeroListComponent'.

I’ve been playing with the new Router for a few weeks now, and this is the biggest blocker for me. I’m going to play around with using a resolve instead of letting the component load its own data … but this basically turns my mental model inside-out and makes if radically different to think about.

Using [hidden] or something akin to that become problematic because then you need to have safe-navigation operators all over your template, data?.prop.

Not sure if I’m the only one who feels like this is very problematic.

+1 I am creating an expandable grid when every expansion has tabs(using routes). I have been banging my head for hours to understand why I get this error message. at least now I know 😃

How do I apply this fix? Still not working in router 3.0.0-beta.2.

Thanks in advance.

@bennadel what is ngRx Router? where I can find it?

I fixed. But I found a strange bug. Is important the order of the ngIF.

First on @frederikaalund plunker’s just add a new <div *ngIf="!test"> and it will work. It needs yes or yes to render the router-outlet

But if you enter to my plunker (http://plnkr.co/edit/hBXWb8Skv4KYExkg6r6X?p=preview) You will see that it does not work and get’s a new error. Is like if the <ngIf> is complex inside you get an error. But if you put first the <div *ngIf="!test"> <router-outlet></router-outlet> </div> it will work. Really strange.

I just tried using the ngRx Router for this, and it works just as you would expect it to.

<template [ngIf]="! isLoading">
    {{ data_driven_content }}
    <route-view></route-view>
    {{ data_driven_content }}
</template>

… ah, the world makes sense again 😃 Would love to see this work in NG2 router eventually.

@vsavkin Thanks, is this now in a released version? Updating the plunkr to router version 3.0.0-beta.2 and angular 2.0.0-rc.4, it still seems not be finding the outlet within the CrisisCenterComponent. Updated Plunkr.

Fixed: https://github.com/angular/angular/pull/9748