Как использовать именованные оутлеты в Angular?

Question

serking77 @serking77

Как использовать именованные оутлеты в Angular?

Друзья, подскажите... Делаю приложение и нужно загрузить необходимые роуты в попап окна... сделал дочерние компоненты и настроил роутинг, но не работает в чем может быть дело...
app-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
// import {AuthComponent} from './auth/auth.component';
// import {LoginComponent} from './auth/login/login.component';
// import {SignupComponent} from './auth/signup/signup.component';
import {PublicComponent} from './public/public.component';
import {LoginComponent} from './public/login/login.component';
import {SignupComponent} from './public/signup/signup.component';

const routes: Routes = [
 {path: '', component: PublicComponent, pathMatch: 'full'},
 {path: '', component: PublicComponent, children: [
     { path: 'login.html', component: LoginComponent, outlet: 'login' },
     { path: 'signup.html', component: SignupComponent, outlet: 'signup' }
   ] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {}

public.component.html

<!--[if lt IE 8]>
<p class="browserupgrade">Вы используете <strong>устаревший</strong> браузер. Пожалуйста, <a href="http://browsehappy.com/">обновите ваш браузер,</a> чтобы улучшить отображение сайта и получить новые возможности.</p>
<![endif]-->
<div class="wrapper">
  <div class="maincontent">
    <header class="header">
      <div class="container">
        <div class="auth-comp" style="float: right;">
          <button type="button" class="btn btn-outline-dark">Регистрация</button>
          <button type="button" class="btn btn-outline-dark">Войти</button>
          <router-outlet name="login"></router-outlet>
          <router-outlet name="signup"></router-outlet>
        </div>
      </div>
    </header>
    <div class="content">
      <div class="container">
        <ul class="nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link active" [routerLink]="'/'" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Главная</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" [routerLink]="'/about.html'" routerLinkActive="active">Информация</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" [routerLink]="'/service.html'" routerLinkActive="active">Услуги</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " [routerLink]="'/news.html'" routerLinkActive="active">Новости</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " [routerLink]="'/contacts.html'" routerLinkActive="active">Контакты</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " [routerLink]="'/pay-methods.html'" routerLinkActive="active">Чем и как оплатить?</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " [routerLink]="'/addresses-off-points.html'" routerLinkActive="active">Адреса пунктов</a>
          </li>
        </ul>
        <aside class="sidebar">
          <nav class="nav">
          </nav>
        </aside>
        <main class="page-content">
        </main>
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <div class="container">
    <div class="footer__left">
    </div>
    <div class="footer__right">
    </div>
  </div>
</div>