Угловой 2 RC1 - Не удается найти выход по умолчанию

Question

Я пытаюсь перейти с 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) 

Пожалуйста, смотрите мой код ниже ...

App:

import {Component} from "@angular/core"; 
import {Routes} from "@angular/router"; 
import {LoggedInRouterOutlet} from "../../common/directives/logged-in-router-outlet.directive"; 
import {HeaderComponent} from "../../common/components/header.component"; 
import {ErrorComponent} from "../../common/components/error.component"; 
import {AlertComponent} from "../../common/components/alert.component"; 
import {MenuComponent} from "../../common/components/menu.component"; 
import {FooterComponent} from "../../common/components/footer.component"; 
import {router} from "../../routes/routes"; 

@Component({ 
    selector: 'my-app', 
    directives: [HeaderComponent, ErrorComponent, AlertComponent, MenuComponent, FooterComponent, LoggedInRouterOutlet], 
    templateUrl: 'modules/app/components/app.html' 
}) 
@Routes(router.config) 
export class AppComponent { 
} 

App (HTML):

<header></header> 

<error></error> 

<alert></alert> 

<menu></menu> 

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

<footer></footer> 

Маршруты:

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

Bootstrap:

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

Router (директива):

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

Меню (HTML):

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

Router (директива):

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

App (HTML):

<header></header> 

<error></error> 

<alert></alert> 

<menu></menu> 

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

<footer></footer> 

Answer 1

Звучит как этот вопрос https://github.com/angular/angular/issues/8427

Селектор должен быть таким же, как оригинальный выходе маршрутизатора selector: 'router-outlet' в RC.1

Подсказка

@angular/router является устаревшим, а также. Новый (или переработанный) маршрутизатор работает. В настоящее время, вероятно, лучше придерживаться @angular/router-deprecated, пока не появится новый новый маршрутизатор.

Answer 2

Кажется, что маршрутизатор RC1 также устарел.

A little more than a month ago, we introduced a new router at ng-conf. We hoped this would finally resolve the outstanding routing issues in our first design.

It turns out, routing is hard.

We’re grateful to have heard from many folks at ng-conf about flaws in this new design, so we are announcing version 3.0.0-alpha.3 of @angular/router and are deprecating version 2. You should begin using this router right away.

http://angularjs.blogspot.de/2016/06/improvements-coming-for-routing-in.html

Они рекомендуют обновить маршрутизации до новой версии и есть plunkr для него

Get started by checking out this plunker, stay tuned for more about this Router, and the upcoming Angular 2 RC2.

Кажется, что ни RC1, ни версии 3.0.0-alpha.3 стабильны , Таким образом, зависит от вас, какая версия использует либо @ угловой/роутер-устаревший, либо версию 3.0.0-alpha.3.Но у RC1 даже не много документации, и я бы не предлагал использовать. Вы также можете посмотреть в качестве альтернативы на ui-router-ng2

Answer 3

У меня была такая же проблема с @ angular/router 3.0.0-alpha.6. Я следовал за этим Plnkr в качестве примера: http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07.

Моя ошибка ушла при импорте ROUTER_DIRECTIVES от @ угловом/маршрутизатора, когда компонент использует

<router-outlet> 

в шаблоне. Например:

directives: [ROUTER_DIRECTIVES]. 

Пожалуйста, проверьте Plnkr. И особенно app.component.ts и app/crisis-center/crisis-center.component.ts. Оба импортируют ROUTER_DIRECTIVES.