Angular 2 RC1-找不到默认出口

Question

我正试图从Angular 2 beta 17升级到Angular 2 RC1，但遇到以下异常，当点击菜单(html)中的routeLink时，请提供任何有助于我做错什么的想法。

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)

请参阅下面的代码。。。

应用程序：

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

应用程序(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}
]
};

引导程序：

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

菜单(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)

路由器(指令)：

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

应用程序(html)：

<header></header>
<error></error>
<alert></alert>
<menu></menu>
<div class="section">
<router-outlet></router-outlet>
</div>
<footer></footer>

Answer 1

我在@angular/router 3.0.0-alpha.6上遇到了同样的问题。我以这个Plnkr为例：http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07.

当组件使用时，从@angular/ROUTER导入ROUTER_DIRECTIVES时，我的错误消失了

<router-outlet> 

在模板中。像这样：

directives: [ROUTER_DIRECTIVES]. 

请检查Plnkr。尤其是app.component.ts和app/crisk-center/crisis-center.component.ts。两者都导入ROUTER_DIRECTIVES。

Answer 2

听起来像这个问题https://github.com/angular/angular/issues/8427

选择器需要与RC.1 中的原始路由器出口selector: 'router-outlet'相同

提示

@angular/router也被弃用。一个新的(或重新设计的)路由器正在进行中。目前，在新路由器推出之前，最好使用@angular/router-deprecated。

Answer 3

似乎RC1路由器也被弃用了。

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

事实证明，路由很难。

我们很感激在ng conf上听到许多人关于这个新设计，所以我们宣布的3.0.0版本@angular/router和正在弃用版本2。您应该开始使用这个路由器。

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

他们建议将路由升级到一个新版本，并为其提供一些插件

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

看起来RC1和3.0.0版本的alpha.3都不稳定。因此，由您决定哪个版本使用了弃用的@angular/router或3.0.0-alpha.3版本。但RC1甚至没有太多的文档，我不建议使用。您也可以选择ui-router-ng2