Angular2 second level child routing to root insteead of first child

I am trying to create a multilevel routing hierarchy. Something like this:

app

 |---core

       |---items

My app router and html are as follows:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    {path: 'core', loadChildren: 'app/core/core.module#CoreModule'}
];

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

HTML:

<h1>
    {{title}}
</h1>
<router-outlet></router-outlet>

My core route and html are as follows:

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';

import { CoreComponent } from './core.component';

const coreRoutes:Routes = [
    {path: 'item', loadChildren: 'app/core/item/item.module#ItemModule'},
    {path: '', component: CoreComponent}

];

@NgModule({
    imports: [RouterModule.forChild(coreRoutes)],
    exports: [RouterModule] }) export class CoreRoutingModule { }

HTML:

core module
<router-outlet></router-outlet>

And finally the item route and html are as follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ItemComponent } from './item.component';

const itemRoutes:Routes = [
    {path: '', component: ItemComponent}
];

@NgModule({
    imports: [RouterModule.forChild(itemRoutes)],
    exports: [RouterModule]
})
export class ItemRoutingModule {
}

HTML:

<p>
  item works!
</p>

I was expecting to get the following for the url localhost:4200/core/item:

APP Works!
core module
item works

But, I am getting:

APP Works!
item works

So, item router is directly rendering in the app template instead of the core template.