Angular2无法解析RouterOutlet的所有参数：（RouterOutletMap，ViewContainerRef，？，名称）

Question

我对任何JS框架都是全新的。刚开始学习Angular2。我正在为实习做一些基本的应用程序。从角度应用程序中，我将名称发布到Java控制器，获取所需的信息并将其发送回去。当名字是“ Dave”或“ Hal”时，基本上会发生乐趣。一切看起来不错，但是当我运行服务器并尝试进入我的应用程序时，我得到了

例外：错误：未捕获（承诺）：无法解析RouterOutlet的所有参数：（RouterOutletMap，ViewContainerRef，？，名称）。

据我从文档中得知，缺少的参数是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看起来几乎相同，但与戴夫在地方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

对于任何有此问题的人。

当一个Angular依赖项通过npm更新而其他一些内部组件指向以前的版本时，可能会发生这种情况。

错误中的问号表示Angular无法为RouterOutlet组件中的第三个DI参数提供实例。在调试器中仔细检查时，我们可以清楚地看到（并且显然是在阅读routing.umd.js文件的2486行之后），第三个参数“ ComponentFactoryResolver”丢失了。

无法解析RouterOutlet的所有参数：（RouterOutletMap，ViewContainerRef，？，名称）

我建议执行以下步骤。

1. npm卸载@angular --save
2. 使用来自https://angular.io/guide/quickstart的最新依赖项更新您的packages.json
3. npm安装