title: How to change content with <router-outlet> on non-main page?
body: <p>I need to have header, footer and home-news-page when I go to my homepage. And so when I click on the some link on my header, the home-news-page has changed.
  My routing now looks like this:</p>
  
  <pre><code>const ROUTES: Routes = [
  {
    path: '', component: HomeComponent, children: [
      { path: '/sign-up', component: SignUpComponent },
      { path: '/sign-in', component: SignInComponent },
    ]
  },
  { path: '404', component: Page404Component },
  
  { path: '**', redirectTo: '404'},
  ];
  </code></pre>
  
  <p>In the html of my app.component, I only have a <code>routing-outlet</code>.
  My home-page looks like this:</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>header and footer are displayed, and when I click on a link, the content is redrawn as needed. But by default, the component <code>HomeNewsComponent</code> should be preferred and I do not know how to do it.
  I understand that this should be done in routing.module. I tried somehow as <code>path: '', component: HomeNewsComponent</code>, but then I only show the news without header and footer.
  I would be very grateful if someone tells me how to solve this problem.</p>