Javascript 角度2 RC1-找不到默认出口

我正在尝试从Angular 2 beta.17升级到Angular 2 RC1，并且得到以下异常，当点击菜单中的routeLink（html）时，请注意，任何想法都会对我的错误有所帮助

browser_adapter.ts:78 Error: Uncaught (in promise): Cannot find default outlet
    at resolvePromise (zone.js:538)
    at zone.js:574
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.ts:56)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at drainMicroTaskQueue (zone.js:474)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:426)

请看下面我的代码

应用程序：

应用程序（html）：

引导：

import {ROUTER_PROVIDERS} from "@angular/router";
import {HTTP_PROVIDERS} from "@angular/http";
import {bootstrap} from "@angular/platform-browser-dynamic";
import {enableProdMode} from "@angular/core";

import {AppComponent} from "../app/components/app.component";

import {AuthenticationService} from "../common/services/authentication.service";
import {RequestService} from "../common/services/request.service";
import {NotificationService} from "../common/services/notification.service";
import {Base64Service} from "../common/services/base64.service";
import {ValidationService} from "../common/services/validation.service";

enableProdMode(); 

bootstrap(AppComponent,
  [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    AuthenticationService,
    RequestService,
    NotificationService,
    Base64Service,
    ValidationService
  ]);

路由器（指令）：

菜单：

菜单（html）：

路由器（指令）：

应用程序（html）：

听起来像是这个问题

选择器需要与RC.1中的原始路由器出口相同

选择器：“路由器出口”

提示

---

@angular/router

也不推荐使用。新的（或返工的）路由器正在工作中。目前最好还是坚持使用

@angular/router deprecated

，直到新路由器推出。

看来RC1路由器也不推荐使用

一个多月前，我们在ng-conf推出了一款新路由器。 我们希望这将最终解决该地区悬而未决的路由问题 我们的第一个设计

事实证明，路由很难

我们很高兴听到ng conf的许多人关于 这是一种新的设计，因此我们将发布的3.0.0-alpha.3版 @angular/router和正在弃用版本2。你应该开始使用 这台路由器马上就来

他们建议将路由升级到一个新版本，并为此提供一些支持

通过查看此plunker开始，请继续关注更多关于 这个路由器和即将推出的Angular 2 RC2

---

似乎RC1和3.0.0-alpha.3版本都不稳定。因此，由您决定使用@angular/router弃用版本还是版本3.0.0-alpha.3。但是RC1甚至没有很多文档，我不建议使用。您也可以查看

我对@angular/router 3.0.0-alpha.6也有同样的问题。我以这个Plnkr为例：

当组件使用

<router-outlet> 

---

请检查Plnkr。尤其是app.component.ts和app/crisis center/crisis-center.component.ts。两者都导入路由器指令。

感谢您的回复，我同意这看起来是同一个问题。当我进行建议的更改时，虽然我现在得到了一个单独的错误。TypeError:this.\u parentRouter.registerPrimaryOutlet不是一个函数，请查看我上面的问题，以查看我所做的更改和错误的堆栈跟踪，如果您对此有想法，将不胜感激，谢谢您的时间。我没有其他想法。新的路由器angain将很快发货。我不确定花很多时间在当前路由器上是不是一个好主意。我想我不得不推迟到新路由器发布，谢谢你的解释和时间。非常感谢你，我会看看是否应用相同的方法解决我的问题。没问题，我希望这对你有所帮助！

import {HomeComponent} from '../home/components/home.component';
import {LoginComponent} from '../login/components/login.component';
import {CustomerSearchComponent} from '../customer/components/search.component';

export const router = {
    // confirm , useAsDefault: true does not work anymore
    config: [
        {path: '/home', component: HomeComponent, name: 'Home'},
        {path: '/login', component: LoginComponent, name: 'Login'},
        {path: '/customer_search', component: CustomerSearchComponent, name: 'CustomerSearch'},
        {path: '*', component: HomeComponent}
    ]
};

import {ROUTER_PROVIDERS} from "@angular/router";
import {HTTP_PROVIDERS} from "@angular/http";
import {bootstrap} from "@angular/platform-browser-dynamic";
import {enableProdMode} from "@angular/core";

import {AppComponent} from "../app/components/app.component";

import {AuthenticationService} from "../common/services/authentication.service";
import {RequestService} from "../common/services/request.service";
import {NotificationService} from "../common/services/notification.service";
import {Base64Service} from "../common/services/base64.service";
import {ValidationService} from "../common/services/validation.service";

enableProdMode(); 

bootstrap(AppComponent,
  [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    AuthenticationService,
    RequestService,
    NotificationService,
    Base64Service,
    ValidationService
  ]);

import {ElementRef, DynamicComponentLoader, AttributeMetadata, Directive} from '@angular/core';
import {Router} from '@angular/router';
import {AuthenticationService} from '../services/authentication.service';
import {RouterOutlet} from '@angular/router/src/directives/router_outlet'; 

@Directive({
  selector: 'logged-in-router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
  publicRoutes = [
    'home', 'login'
  ];

  static get parameters() {
    return [[ElementRef], [DynamicComponentLoader], [Router], [new AttributeMetadata('name'), String], [AuthenticationService]];
  }

  constructor(elementRef, componentLoader, parentRouter, name, authenticationService) {
    super(elementRef, componentLoader, parentRouter, name);

    this.parentRouter = parentRouter;
    this.authenticationService = authenticationService;
  }

  activate(instruction) {
    if (this._canActivate(instruction.urlPath)) {
      return super.activate(instruction);
    }

    this.parentRouter.navigate(['login']);
  }

  _canActivate(url) {
    return this.publicRoutes.indexOf(url) !== -1 || this.authenticationService.isLoggedIn();
  }
}

import {Component} from "@angular/core";
import {ROUTER_DIRECTIVES, Router} from "@angular/router";
import {AuthenticationService} from "../services/authentication.service";

@Component({
  selector: 'menu',
  directives: [ROUTER_DIRECTIVES],
  templateUrl: 'modules/common/components/menu.html'
})
export class MenuComponent {
  router;

  static get parameters() {
    return [[Router],[AuthenticationService]];
  }

  constructor(router, authenticationService) {
    this.router = router;
    this.authenticationService = authenticationService;
  }

  isLoggedIn() {
    return this.authenticationService.getLoggedIn();
  }

  logout() {
    this.authenticationService.logout();
    this.router.navigate(['/home']);
    return false;
  }
}

<div class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" [routerLink]="['home']">Home</a>
    </div>

    <div class="collapse navbar-collapse" id="menu-navbar-collapse" data-ng-controller="MenuController">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">Customer <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a [routerLink]="['customer_search']">Search</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right" *ngIf="!(isLoggedIn() | async)">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">Login or Register <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a [routerLink]="['login']"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right" *ngIf="(isLoggedIn() | async)">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">My Account <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#" (click)="logout()">Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

TypeError: this._parentRouter.registerPrimaryOutlet is not a function
    at LoggedInRouterOutlet.RouterOutlet (router_outlet.ts:46)
    at new LoggedInRouterOutlet (logged-in-router-outlet.directive.js:108)
    at DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:61)
    at DebugAppView.AppView.create (view.ts:110)
    at DebugAppView.create (view.ts:315)
    at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent_Host.template.js:17)
    at DebugAppView.AppView.create (view.ts:110)
    at DebugAppView.create (view.ts:315)
    at ComponentFactory.create (component_factory.ts:96)
    at eval (application_ref.ts:359)

import {ElementRef, DynamicComponentLoader, AttributeMetadata, Directive} from '@angular/core';
import {Router} from '@angular/router';
import {AuthenticationService} from '../services/authentication.service';
import {RouterOutlet} from '@angular/router-deprecated'; // TODO: temp replace with rc2 as that exports it

@Directive({
  selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
  publicRoutes = [
    'home', 'login'
  ];

  static get parameters() {
    return [[ElementRef], [DynamicComponentLoader], [Router], [new AttributeMetadata('name'), String], [AuthenticationService]];
  }

  constructor(elementRef, componentLoader, parentRouter, name, authenticationService) {
    super(elementRef, componentLoader, parentRouter, name);

    this.parentRouter = parentRouter;
    this.authenticationService = authenticationService;
  }

  activate(instruction) {
    if (this._canActivate(instruction.urlPath)) {
      return super.activate(instruction);
    }

    this.parentRouter.navigate(['login']);
  }

  _canActivate(url) {
    return this.publicRoutes.indexOf(url) !== -1 || this.authenticationService.isLoggedIn();
  }
}

<header></header>

<error></error>

<alert></alert>

<menu></menu>

<div class="section">
    <router-outlet></router-outlet>
</div>

<footer></footer>

<router-outlet> 

directives: [ROUTER_DIRECTIVES].