Angular2 Не удается разрешить все параметры для RouterOutlet: (RouterOutletMap, ViewContainerRef,?, Name)

Question

Я абсолютно не знаком с какой-либо структурой JS. Просто начал изучать Angular 2. Я делаю базовое приложение для стажировки. Из углового приложения я отправляю имя на контроллер Java, чтобы получить информацию и отправить ее обратно. В основном весело происходит, когда имя «Dave» или «Hal». Все выглядит нормально, но когда я запускаю сервер и попытаться получить мое приложение, я получаю

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

Насколько я могу судить по документации, недостающий параметр componentFactoryResolver. Как избавиться от этой ошибки и запустить все правильно.

Вот файлы:

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

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

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

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

app/hal.component.ts (dave.component.ts выглядит почти так же, но с Дэйвом в местах хал)

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

Не нужно было менять версию маршрутизатора. Все, что работает сейчас на 3.0.0-beta.1.

Теперь он работает как предполагается, я больше не получаю эту ошибку (не так, как будто я не получаю других сейчас, но это не имеет никакого отношения к вопросу).

ЧТО Я СДЕЛАЛотсортирован по правдоподобности решения Issue

1. предварительно скомпилированных компонентов в app.component

   precompile: [HelloComponent, HalComponent, DaveComponent]

2. Перенаправление теперь установлен на полный путь матча

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

Answer 2

Я тоже получил эту ошибку «Не удается разрешить все параметры RouterOutlet: (RouterOutletMap, ViewContainerRef,?, Name). "

Для меня разрыв маршрутизации после обновления до 3.0.0-beta.1 из 3.0.0-alpha.8. Попытка вернуться к альфа-версии.

Answer 3

Для тех, кто с этой проблемой.

Это может произойти, когда одна зависимость от углов обновляется через npm, а некоторые другие внутренние компоненты указывают на предыдущую версию.

Значок вопроса в ошибке означает, что угловой не смог предоставить экземпляр для третьего параметра DI в компоненте RouterOutlet. При внимательном рассмотрении в отладчике мы можем четко видеть (и, очевидно, я имею в виду после прочтения строки 2486 файла routing.umd.js), что отсутствует третий параметр «ComponentFactoryResolver».

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

Я рекомендую следующие шаги.

1. НПМ деинсталлировать @angular --save
2. Обновите packages.json с последними зависимости от https://angular.io/guide/quickstart
3. НПМ установки