title: @angular/router wrap route component in router-outlet for styling
body: <p>I have a simple angular <em>(8+)</em> application using <code>@angular/router</code> with multiple components as routes, and each component use <code>@angular/animations</code> for transitions.</p>
  
  <p><code>&lt;router-outlet&gt;</code> directive is fullscreen using css <code>width: 100vw</code> and <code>height: 100vh</code> to override default scroll. My idea is to wrap each route with a  <code>&lt;div&gt;</code> or a specific class which will allow to define fixed layout.</p>
  
  <p>My current version works great, <strong>but I have to manually add the <code>&lt;div&gt;</code> and was hoping to find an automatic solution</strong> like <code>@angular/animations</code> does.</p>
  
  <h2>app.ts with main router</h2>
  
  <pre><code>  &lt;main [@routerTransition]="getState(o)"&gt;
      &lt;router-outlet #o="outlet"&gt;&lt;/router-outlet&gt;
    &lt;/main&gt;
  </code></pre>
  
  <h2>Route component html template</h2>
  
  <pre><code>&lt;div class="route"&gt; &lt;!--  class which should be automatically wrapped --&gt;
    &lt;div class="container"&gt;
      &lt;h1&gt;title&lt;/h1&gt;
      &lt;p&gt;Blablabla&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Routes</h2>
  
  <pre><code>// State is use to bind animation
  export const appRoutes: Routes = [
    {
      path: 'page1',
      loadChildren: () =&gt; import('./page1/page1.module').then(mod =&gt; mod.Page1Module),
      data: { theme: 'light' }
    },
    {
      path: 'page2',
      loadChildren: () =&gt; import('./page2/page2.module').then(mod =&gt; mod.Page2Module),
      data: { theme: 'light' }
    },
    ...
  ];
  </code></pre>
  
  <p>Like I said, <strong>this code works</strong> exactly as expectied, but having to maintain manually a certain DOM layout is not good enough.</p>