Angular2 Can't resolve all parameters for RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, name)

Question

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

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

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

Here are the files:

the app/main.ts

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 => console.error(err));

the app/app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES }  from '@angular/router';

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

the app/app.routes.ts

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)
];

the app/hello.component.ts

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) => this.processResponse(res),
                (err) => 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';
    }
}

the app/hal.component.ts (dave.component.ts looks almost the same but with dave in places of hal)

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 => {
            this.user.message = params['message'];
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

Answer 1

For anyone having this issue.

This could happen when one Angular dependency gets updated through npm while some other internal component points to a previous version.

The question mark in the error means that Angular failed to provide an instance to the third DI parameter in the RouterOutlet component. When examined closely in the Debugger we can clearly see (And by clearly I mean after reading the line 2486 of the routing.umd.js file) that the third parameter "ComponentFactoryResolver" is missing.

Can't resolve all parameters for RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, name)

I recommend the following steps.

1. npm uninstall @angular --save
2. Update your packages.json with the latest dependencies from https://angular.io/guide/quickstart
3. npm install

Answer 2

Didn't have to reverse router version. All that works now on 3.0.0-beta.1.

Now it works as supposed, I'm not getting that error anymore (not like I dont get others now, but that have nothing to do with question).

WHAT I DID sorted by plausibility of resolving issue

1. Precompiled components in app.component

   precompile: [HelloComponent, HalComponent, DaveComponent]

2. Redirecting now set to full path match

   export const routes: RouterConfig = [ { path: '', redirectTo: '/hello', pathMatch: 'full' } ... ];

Answer 3

I too got this error "Can't resolve all parameters for RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, name)."

For me, the routing breaks after I upgrade to 3.0.0-beta.1 from 3.0.0-alpha.8. Trying reverting back to the alpha version.