Question

我正在尝试从Angular 2 beta.17升级到Angular 2 RC1并且遇到以下异常，当点击菜单中的routeLink（html）时，任何想法都会对我做错了会有所帮助。< / p>

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

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

自举：

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

App（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。

当Component使用

从@ angular / router导入ROUTER_DIRECTIVES时，我的错误消失了

<router-outlet>

在模板中。像这样：

directives: [ROUTER_DIRECTIVES].

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

Answer 2

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

选择器必须与RC.1中的原始路由器插座selector: 'router-outlet'相同

<强>提示

{@ 1}}也已弃用。新的（或重新设计的）路由器正在进行中。目前，在新的新路由器出局之前，最好坚持使用@angular/router。

Answer 3

似乎也不推荐使用RC1路由器。

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

事实证明，路由很难。

我们很高兴听到许多人在ng-conf中听到过有关漏洞的信息   这个新设计，所以我们宣布版本3.0.0-alpha.3   @ angular / router并且正在弃用版本2.您应该开始使用   这个路由器马上。

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

他们建议将路由升级到新版本，并为其设置一些plunkr

开始查看这个plunker，敬请期待更多关于这个路由器，以及即将推出的Angular 2 RC2。

似乎RC1和版本3.0.0-alpha.3都不稳定。因此，由哪个版本使用@ angular / router-deprecated或3.0.0-alpha.3版本取决于您。但RC1甚至没有很多文档，我也不建议使用。您也可以选择ui-router-ng2

Angular 2 RC1 - 找不到默认插座

3 个答案: