В идеале каждый шаблон компонента отвечает за собственный html. IMO это лучший способ справиться с этим.

См. templateblitz

шаблон для корневого компонента

@Component({
  selector: '',
  template: ''
})
export class RootComponent{}

шаблон для компонента 1

@Component({
  selector: 'app-one',
  template: ''
})
export class Child1Component{}

шаблон для компонента 2

@Component({
  selector: 'app-two',
  template: ''
})
export class Child2Component{}

шаблон для компонента 3

@Component({
  selector: 'app-three',
  template: '
Hi there from 3
'
})
export class Child3Component{}

шаблон для компонента 4

@Component({
  selector: 'app-four',
  template: '
Hi there from 4
'
})
export class Child4Component{}