title: Create a Routes path that loads a specific component based on condition
body: <p>I want to load distinct components for similar structured paths.</p>
  
  <p><strong>Means</strong>:</p>
  
  <blockquote>
    <p>example.com/whatever-post-slug --> Load Post Component<br>
    example.com/whatever-page-slug --> Load Page Component<br>
    example.com/hello-i-am-a-string --> Load Post Component (because that
    slug belongs to a post)<br>
    example.com/about-us --> Load Page Component (because that slug belongs to a page)<br></p>
  </blockquote>
  
  <p><strong>Why would I do this?</strong></p>
  
  <p><em>One may think</em>: hey but why don't you just define two prefixed different paths, which is what paths are there for?</p>
  
  <p><em>The answer is</em>: I am creating (by the way an <a href="https://github.com/alvarofranz/wpangular" rel="nofollow noreferrer">open source</a>) Angular WordPress theme and I want the routing to be something the user decides, without forcing any hardcoded structure.</p>
  
  <p>In one of the multiple possibilities, Posts and Pages (if you don't know WordPress, just know those are two distinct content types which I want to use independent Modules and Components for) may share slugs at a root level.</p>
  
  <p>And at a first glance, I cannot know if the slug belongs to a post or a page or something else (so <code>UrlMatcher</code> cannot help here).</p>
  
  <p><strong>Did I think of a solution?</strong></p>
  
  <p>Yes, of three.</p>
  
  <p><strong>First solution</strong></p>
  
  <p>I could create a Wrapper Component that will load for the catchall route, and then, inside this component do something like:</p>
  
  <pre><code>&lt;whatever-a-component *ngIf="showComponentA()"&gt;&lt;whatever-a-component&gt;
  &lt;whatever-b-component *ngIf="showComponentB()"&gt;&lt;/whatever-b-component&gt;
  </code></pre>
  
  <p>And let the Wrapper Component do all the logic.</p>
  
  <p>This adds an extra intermediate Component into the game.</p>
  
  <p><strong>Second solution</strong></p>
  
  <p>Use a resolver for the catchall and then do all the logic in the resolver.</p>
  
  <p>The problem is, I need to subscribe to an http communication to know what kind of content type I am dealing with, and since the Resolver resolve() method needs to return an Observable, it's not nice to subscribe in there.</p>
  
  <p>Of course, it works, if I return a placeholder observable that waits for a while, like so:</p>
  
  <pre><code>// ... inside resolve()
  // Force an observable return to allow suscriptions take their time
  return Observable.create(observer =&gt; {
    setTimeout(() =&gt; {
      console.log("Resolver observable is done");
      observer.complete();
    }, 15000);
  });
  </code></pre>
  
  <p>... or if I pipe my subscription with <code>mergeMap()</code> and return EMPTY when I get the results from my subscription.</p>
  
  <p>And once I get my data back I can set new routes including the current path that must point to its specific component.</p>
  
  <p>That does not seem a very clean approach to me.</p>
  
  <p><strong>Third solution</strong></p>
  
  <p>Just load a normal Dispatcher Component that will do all the checkings at <code>OnInit()</code> and then navigate to a "secret" component-specific url but using <code>{ skipLocationChange: true }</code>, so the user will have the correct route and also the correct component will be loaded.</p>
  
  <p>But again, this adds an extra intermediate component into the game.</p>
  
  <p>I think this is the cleanest solution, since at the App Routing module I can do something like:</p>
  
  <pre><code>{
  path: 'wp-angular/view-post/:id',
  loadChildren: () =&gt; import('./view-post/view-post.module').then(m =&gt; m.ViewPostModule)
  },
  {
  path: 'wp-angular/view-page/:id',
  loadChildren: () =&gt; import('./view-page/view-page.module').then(m =&gt; m.ViewPageModule)
  }
  </code></pre>
  
  <p>So, I will have those modules lazy loaded only if the user actually visits one of those two content types.</p>
  
  <p>Also, that content type component will already be available if the user then visits a second content of the same type.</p>
  
  <p>And the fact that I can use <code>{ skipLocationChange: true }</code> will make it possible to keep the path as expected.</p>
  
  <p>Plus, this allows displaying navigation loading feedback without the need to subscribe to the Router Events.</p>
  
  <p><strong>Question</strong></p>
  
  <p>What would you do and why?</p>
  
  <p>Maybe I am missing some magic Angular feature that allows doing this in a straight-to-the-point way.</p>