Angular 2 Deep Link to Child Router does not resolve

Question

I am getting started with angular 2 and meteor, so i created a simple app and tried to get the child routers working. Everything is fine so far, i do have a nested state like

/products/milk

main.ts

@RouteConfig([
    { path: '/',             name: 'Home',     component: Home },
    { path: '/products/...', name: 'Products', component: Products },
    { path: '/**',           redirectTo: ['Home'] }
])

products.ts

@RouteConfig([
    { path: '/',   name: 'ProductTeaser', component: ProductsTeaser, useAsDefault: true },
    { path: '/milk', name: 'Milk',          component: Milk },
    { path: '/**',    redirectTo: ['ProductTeaser'] }
])

From the application itself getting to the nested route is no problem, but if i try to load the url (products/milk) in the browser directly the state does not load (the index.html is there, and the app contructor is called)

If i go to /products it works as intended, but not for 2nd level routes

Can anyone help me with this issue?

Update 1: As i do not know how to effectively showing this issue in a plunkr / fiddle, i am just putting all the contents here.

app.ts

import 'reflect-metadata';
import 'zone.js/dist/zone';

import {Component, provide} from 'angular2/core';
import {bootstrap} from 'angular2-meteor-auto-bootstrap';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF} from 'angular2/router';
import {Home} from "./imports/home/home";
import {Products} from "./imports/products/products";
import {Admin} from "./imports/admin/admin";
import {Header} from "./imports/components/header/header";

@Component({
    selector: 'app',
    templateUrl: 'client/app.html',
    directives: [ROUTER_DIRECTIVES, Header]
})

@RouteConfig([
    { path: '/',             name: 'Home',     component: Home },
    { path: '/admin',        name: 'Admin',    component: Admin },
    { path: '/products/...', name: 'Products', component: Products },
    { path: '/**',           redirectTo: ['Home'] }
])

class Dairy {
    constructor() {
    }
}

bootstrap(Dairy, [
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, { useValue : '/' })
]);

app html

<div class="container-fluid">
    <div class="container content">
        <router-outlet></router-outlet>
    </div>
</div>

products.ts

import 'reflect-metadata';
import {Component} from 'angular2/core';
import {Milk} from "./milk/milk";
import {RouteConfig, RouterOutlet} from "angular2/router";
import {ProductsTeaser} from "./products-teaser/products-teaser";

@Component({
    selector: 'products',
    templateUrl: '/client/imports/products/products.html',
    directives: [RouterOutlet]
})

@RouteConfig([
    { path: '/',   name: 'ProductTeaser', component: ProductsTeaser, useAsDefault: true },
    { path: '/milk', name: 'Milk',          component: Milk },
    { path: '/**',    redirectTo: ['ProductTeaser'] }
])

export class Products{

}

products html

<h1>All products</h1>
<div>
    <router-outlet></router-outlet>
</div>

Update 2:

I am using angular 2.0.0-beta.15

The server is METEOR@1.3.2.4

I am navigating to the state by a link like:

<a [routerLink]="['Products', 'Milk']">Milk</a>

Same behaviour on Chrome 50 and IE 11

From a comment to a deleted answer

Using the HashLocationStrategy is working, but it is not what i want. AFAIK angular 2 should be able to resolve the state as it gets loaded (app constructor is called). I am not getting a 404 the server redirects the request correctly

Update 3: I started working with firebase, everything works perfectly there, so it seems to me that this is a kind of server related thing.