Angular2 ne Peut pas résoudre tous les paramètres pour RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, de nom)

Je suis totalement nouveau pour toute JS cadre. Juste commencé à apprendre Angulaire 2. Je fais une application de base pour le stage. Angulaires app je poste le nom de Java contrôleur, que d'obtenir l'information nécessaire et l'envoie de nouveau. Fondamentalement, le plaisir se produit lorsque le nom est 'Dave' ou 'Hal'.
Tout a l'air bien, mais lorsque je lance le serveur et essayer d'obtenir à mon application, j'obtiens

EXCEPTION: Erreur: Uncaught (promettre): ne Peut pas résoudre tous les paramètres pour RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, nom).

Aussi loin que je peux dire à partir de la documentation, le paramètre manquant est componentFactoryResolver. Comment se débarrasser de cette erreur et de l'exécuter convenablement.

Voici les fichiers:

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

la 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';
}

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

la 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';
    }
}

la app/hal.component.ts (dave.component.ts ressemble presque la même chose mais avec dave dans les lieux de 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();
    }
}
  • Pouvez-vous faire un plunker afin que nous puissions essayer? Aussi, avez-vous besoin terminal: true dans votre parcours comme indiqué ici: angular.io/docs/ts/latest/guide/router.html#!#redirection
  • Je pourrais, mais ne savent pas comment le faire fonctionner à la volée. Je veux dire toutes les dépendances node, Java de base et d'autres choses.
  • Ne peut pas résoudre tous les paramètres pour RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, nom).
  • Voici un petit exemple de routage comme indiqué sur le site officiel github.com/lohiarahul/Angular2-Silverlight-Starter Il se casse dès que je l'ai mise à niveau du routeur de la version de la récente version bêta. Et btw, grande série sur pluralsight, j'ai commencé là.
  • J'ai suivi officiel docs et tutos de anguleux.io, mais qu'il se casse. Après quelques tripoter les fichiers, maintenant ça marche mais maintenant j'ai des problèmes avec les paramètres de la requête. Ce que je n'ai énumérés ci-dessous.
InformationsquelleAutor AfroMetal | 2016-07-01