How to extend RouterOutlet when using a new router in RC.

Question

I cannot extend RouterOutlet when using a new router in RC.

Example:

import { Directive } from '@angular/core'; import { Router, ROUTER_DIRECTIVES, RouterOutlet } from '@angular/router'; @Directive({ selector: 'router-outlet' }) export class RouterOutletDirective extends RouterOutlet { } 

Error:

@ angular / router / index "'does not have an exported element' RouterOutlet '.

Am I doing something wrong or has it broken with the new router in RC.1?

---

Updated:

 import { Directive, Attribute, ViewContainerRef, DynamicComponentLoader } from '@angular/core'; import { Router, Routes, RouterOutletMap } from '@angular/router'; import { RouterOutlet } from '@angular/router/src/directives/router_outlet'; @Directive({ selector: 'router-outlet' }) export class RouterOutletDirective extends RouterOutlet { constructor(parentOutletMap: RouterOutletMap, _location: ViewContainerRef, name: string) { super(parentOutletMap, _location, name); console.log( parentOutletMap ); } activate() { console.log('Activate'); } } 

So now it works, but the RouterOutlet is underlined in red, and the type "any" is not the type of the constructor function, and the activating part does not work. Did I miss something?

Answer 1

RouterOutlet and RouterLink not exported from @angular/router . This has been fixed recently and I expect this fix to be included in RC.2.

You can import them from the private path ( src/... ) as a workaround until the new version is published.

Tip

However, the new router is working again. If you are currently working with a switch from a beta router or @angular/router-derprecated to @angular/router , it's probably best to defer it until a new new router arrives.

Answer 2

Here is the working code with RC version 1

 import { Directive, Attribute, ViewContainerRef, DynamicComponentLoader } from '@angular/core'; import { Router, Routes, RouterOutletMap } from '@angular/router'; import { RouterOutlet } from '@angular/router/src/directives/router_outlet'; @Directive({ selector: 'router-outlet' }) export class LoggedInRouterOutlet extends RouterOutlet { constructor(parentOutletMap: RouterOutletMap, _location: ViewContainerRef, name: string){ super(parentOutletMap, _location, name); } //activate() {} //EXPIRED unload(): void { } loadedComponent: Object isLoaded: boolean load(factory, providers, outletMap: RouterOutletMap): any { super.load(factory, providers, outletMap); //DO YOUR CHECK HERE return this.loadedComponent; } }