Question

我对任何JS框架都是全新的。刚开始学习Angular 2.我正在为实习做一些基本的应用程序。从角度应用程序我发布名称到Java控制器，获取所需的信息并将其发回。当名字是“戴夫”时，基本上会发生有趣的事情。或者＆＃39; Hal＆＃39;。一切看起来都不错，但是当我运行服务器并尝试访问我的应用程序时，我得到了

EXCEPTION：错误：未捕获（在承诺中）：无法解析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看起来几乎相同但 dave 在 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，？，name）

我建议采取以下步骤。

npm uninstall @angular --save
使用https://angular.io/guide/quickstart
npm install

Answer 2

没有必要撤销路由器版本。所有这一切现在都在3.0.0-beta.1上运行。

现在它按照假设运行，我不再得到那个错误了（不像我现在没有得到别人，但这与问题无关）。

根据解决问题的合理性排序

app.component
中的预编译组件
precompile: [HelloComponent, HalComponent, DaveComponent]
重定向现在设置为完整路径匹配

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

Answer 3

我也遇到了这个错误＆＃34;无法解析RouterOutlet的所有参数：（RouterOutletMap，ViewContainerRef，？，name）。＆＃34;

对我来说，从3.0.0-alpha.8升级到3.0.0-beta.1后，路由中断了。尝试恢复到alpha版本。

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

3 个答案: