Как прекратить дублирование child-components при routes

const SignupRoutes: Routes = [
  { path: 'firstStep', component: FirstStepComponent, pathMatch: 'full' },
  { path: 'secondStep', component: SecondStepComponent, pathMatch: 'full' },
  { path: 'thirdStep', component: ThirdStepComponent, pathMatch: 'full' },
];
const appRoutes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', component: LoginComponent },
{ path: 'index', component: IndexComponent },
{ path: 'service', component: ServicesComponent },
{ path: 'indoor', component: IndoorComponent },
{ path: 'invoice', component: InvoiceComponent },
{ path: 'report', component: ReportComponent },
{ path: 'settings', component: SettingsComponent },
{ path: 'shop', component: ShopComponent },
{ path: 'signup2', component: SignupComponent, children: SignupRoutes },
{ path: 'password', component: PasswordComponent },
{ path: 'settings/telephones', component: TelephonesComponent },
{ path: 'settings/password-edit', component: PasswordEditComponent },
{ path: '**', redirectTo: '/login'}
];

Доброго дня всем!Люди добрые не подскажите в чем может быть моя проблема,уже загуглился.Проблема в следующем, есть основной компонент регистрации, регистрация состоит из 3 шагов, в каждом из них есть кнопка Далее(след шаг).Каждый шаг у меня определен как отдельный компонент (child-component).Теперь когда я нажимаю Далее, то компонент след шага подгружается правильно, НО предыдущий шаг никуда не девается, т.е он так же остается в верстке, и просто уходит ниже подгруженного компонента, вот так

вот так выглядит template основного signup component

а это сама структура вложения файлов