Angular2 Can't resolve all parameters for RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, name)
<p>I'm totally new to any JS framework. Just started learning Angular 2. I'm doing some basic app for internship. From angular app I post name to Java controller, that get's info needed and sends it back. Basically fun happens when name is 'Dave' or 'Hal'.
All looks fine, but when I run server and try to get to my app, I get </p>

<blockquote>
  <p>EXCEPTION: Error: Uncaught (in promise): Can't resolve all parameters for RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, name).</p>
</blockquote>

<p>As far as I can tell from documentation, the missing parameter is <code>componentFactoryResolver</code>. How to get rid of this error and run it all properly.</p>

<p>Here are the files:</p>

<p>the <code>app/main.ts</code></p>

<pre><code>import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS
])
    .catch(err =&gt; console.error(err));
</code></pre>

<p>the <code>app/app.component.ts</code></p>

<pre><code>import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES }  from '@angular/router';

@Component({
    selector: 'my-app',
    template: `
        &lt;h1&gt;{{title}}&lt;/h1&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
    title = 'Names';
}
</code></pre>

<p>the <code>app/app.routes.ts</code></p>

<pre><code>import { provideRouter, RouterConfig }  from '@angular/router';

import { HelloComponent } from './hello.component';
import { DaveComponent } from './dave.component';
import { HalComponent } from './hal.component';

export const routes: RouterConfig = [
    { path: '', redirectTo: '/hello' },
    { path: 'index.html', redirectTo: '/hello' },
    { path: 'hello', component: HelloComponent },
    { path: 'dave', component: DaveComponent },
    { path: 'hal', component: HalComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];
</code></pre>

<p>the <code>app/hello.component.ts</code></p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Headers, Http, Response } from '@angular/http';
import 'rxjs/Rx';

@Component({
    selector: 'my-hello',
    templateUrl: 'app/hello.component.html'
})
export class HelloComponent implements OnInit{
    public name = 'stranger';

    constructor(
        private router: Router,
        private http: Http) {
    }

    ngOnInit() {
        this.name = 'stranger';
    }

    sendName(name: string) {
        this.post(name);
    }

    post(name: string) {
        let headers = new Headers({
            'Content-Type': 'application/json'});

        this.http
            .post('names', name, {headers: headers})
            .subscribe((res:Response) =&gt; this.processResponse(res),
                (err) =&gt; this.handleError(err));
    }

    processResponse(response: Response) {
        if (response.status == 418) {
            return;
        } else if (response.json().page == "/dave" || response.json().page == "/hal") {
            let messageString = response.json().message;
            this.router
                .navigate([response.json().page, { queryParams: { message: messageString } }]);
        } else {
            this.name = response.json().name;
        }
    }
    handleError(error: any) {
        this.name = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    }
}
</code></pre>

<p>the <code>app/hal.component.ts</code> (<code>dave.component.ts</code> looks almost the same but with <em>dave</em> in places of <em>hal</em>)</p>

<pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { User } from './user';

@Component({
    selector: 'my-hal',
    templateUrl: 'app/hal.component.html'
})
export class HalComponent implements OnInit, OnDestroy {
    user =  new User();
    sub: any;

    constructor(
        private route: ActivatedRoute) {
    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params =&gt; {
            this.user.message = params['message'];
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}
</code></pre>