Помощь в настройке роутинга на Ангулар2

Господа, добрый день! Нужна помощь в настройке роутинга на втором ангуляре. Видимо я его неправильно понимаю, потому как он работает несколько не так, как ожидалось.

Собственно вот такое поведение нужно: есть страница тикетов в виде таблицы, каждое название тикета является ссылкой на сам вопрос, при нажатии на которую страница должна перерисовываться без перезагрузки и показывать детали самого тикета.

Вот какое поведение есть сейчас: по сути никакого, потому что криво отрисовывается страница тикетов. Как указано в документации, книгах и информации в интернете, я использую для роутинга тег router-outlet, но тикеты отрисовываются не в нем, а под ним и не полностью, как будто что-то стопает работу ангуляра.

Важный момент - сейчас весь проект работает на AngularJS и я постепенно перевожу его на Angular2, соответсвенно запуск второго ангуляра идет под первым.

Сам код:
index.ts

import '../polyfills.ts';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { TicketsAppModule } from './app.module';
import { launched$ } from '../launcher';
declare const process;
const env = process.env.NODE_ENV;
env != 'development' && enableProdMode();
launched$.subscribe(() => {
  if (document.querySelector('[app-module=tickets]'))
    platformBrowserDynamic().bootstrapModule(TicketsAppModule, {ngZone: 'noop'});
})

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { SharedModule } from 'app/shared';
import { configInitializer } from 'app/config';
import { TicketsAppRoutingModule } from './app-routing.module';
import { TicketsComponent } from './tickets.component';
import { TicketListComponent } from './list/ticket-list.component';
import { TicketDetailComponent } from './detail/ticket-details.component';
@NgModule({
  declarations: [
    TicketsComponent,
    TicketListComponent,
    TicketDetailComponent
  ],
  imports: [
    NgbModule.forRoot(),
    BrowserModule,
    SharedModule,
    TicketsAppRoutingModule
  ],
  exports: [RouterModule],
  providers: [
    configInitializer,
    {
      provide: APP_BASE_HREF,
      useValue: '/',
    }
  ],
  bootstrap: [TicketsComponent],
})
export class TicketsAppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TicketListComponent } from './list/ticket-list.component';
import { TicketDetailComponent } from './detail/ticket-details.component';
declare const I18n: any;
export const routes: Routes = [
  {
    path: `${I18n.locale}`,
    children: [
      {
        path: 'tickets',
        component: TicketListComponent,
      },
      {
        path: 'tickets/:id',
        component: TicketDetailComponent
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class TicketsAppRoutingModule { }

tickets.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
})
export class TicketsComponent { }

Далее дочерние компоненты
ticket-list.component.ts

// привожу не весь код компонента,
// так как там работа с потоками не относящаяся к вопросу
import { Component, OnInit } from '@angular/core';
import template from './ticket-list.tpl.pug';
@Component({
    selector: 'app-ticket-list',
    template,
})
export class TicketListComponent implements OnInit {...}

ticket-details.component.ts

import { Component} from '@angular/core';
import template from './ticket-details.tpl.pug';
@Component({
    selector: 'app-ticket-detail',
    template,
})
export class TicketDetailComponent { }

Сейчас компонент ticket-list отрисовывается вот так:

Однако, если в файле tickets.component.ts поменять строку template: '<router-outlet></router-outlet>' на template: '<app-ticket-list></app-ticket-list>', то отрисовываться ticket-list уже будет правильно, но при переходе в ticket-details будет происходить перезагрузка страницы:

Очень нужна помощь, идеи кончились, буду благодарен за любой совет!