title: Angular2 Can't resolve all parameters for RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, name)
body: <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>