Primary outlet is already registered.

[dieuhd]

When i update angular to beta9, i got an error:

ORIGINAL EXCEPTION: Primary outlet is already registered.BrowserDomAdapter.logError @ angular2.dev.js:23597ExceptionHandler.call @ angular2.dev.js:1269(anonymous function) @ angular2.dev.js:12576NgZone._notifyOnError @ angular2.dev.js:13620collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13524Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13543zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123microtask @ angular2.dev.js:13575Zone.run @ angular2-polyfills.js:1243(anonymous function) @ angular2.dev.js:13543zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262 angular2.dev.js:23597 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23597ExceptionHandler.call @ angular2.dev.js:1272(anonymous function) @ angular2.dev.js:12576NgZone._notifyOnError @ angular2.dev.js:13620collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13524Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13543zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123microtask @ angular2.dev.js:13575Zone.run @ angular2-polyfills.js:1243(anonymous function) @ angular2.dev.js:13543zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

[chenkie]

Did you try cloning the latest? Just updated to beta.9 :)

[kukicado]

This is a common problem if you are trying to use the minified version of the router library. Try switching to the non-minified version and the problem should go away.

[dieuhd]

@chenkie: After update angular to beta 9, this error occurred @kukicadnan: I am using non-minified version.

[timdp]

I ported the custom router outlet over to my own code and an upgrade to beta 9 triggered the same issue. Here's the relevant Angular 2 commit.

[kukicado]

@dieuhd - have you also updated the other libraries including rxjs and zone (as well as devDependencies). I had that issue arise during the bump to beta 9 - but after updating all dependencies to what you see in the latest commit and using the non-minified version of the router the error went away. Is there a code sample you can share?

[dieuhd]

@kukicadnan Here are my code:

• app.component.ts

import {Component, Input} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES, CanActivate} from 'angular2/router';
import {HTTP_PROVIDERS}    from 'angular2/http';
import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
import { AuthConfig, AuthHttp } from 'angular2-jwt';

import {LoggedInRouterOutlet} from '../directives/logined-in-outlet.directive';
import {PostsComponent} from './posts.component';
import {LoginComponent} from './login.component';
import {AuthService} from '../services/auth.service';


@Component({
    selector: 'hb-blog',
    templateUrl: '/app/components/app.component.html',
    directives: [MATERIAL_DIRECTIVES, LoggedInRouterOutlet, ROUTER_DIRECTIVES, LoginComponent]
})

@RouteConfig([
    { path: '/login', name: 'Login', component: LoginComponent },
    { path: '/posts', name: 'Posts', component: PostsComponent },
    { path: '/**', redirectTo: ['Login'] }
])

export class AppComponent { 
    public isLogined: boolean = false;
    public firstLoaded: boolean = false;
    constructor(private _router: Router, private _authService: AuthService) {

    }
    get authenticated(){
        return this._authService.isLoggedIn();
    }
    get userInfo() {
    }

    logout() {
        this._authService.logout();
        this._router.navigate(["Login"]);
    }
}

• package.json

"dependencies": {
    "angular2": "2.0.0-beta.9",
    "angular2-jwt": "^0.1.8",
    "bootstrap": "^3.3.6",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.33.13",
    "marked": "^0.3.5",
    "ng2-material": "0.2.11",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.22",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.8.7",
    "typings": "^0.6.8"
  }

[timdp]

Not to hijack this thread, but as an alternative, you can also apply a @CanActivate decorator to your components. In my experimental project, I've replaced the router outlet override with a tiny @Auth decorator, which wraps @CanActivate. I'm not sure which approach I prefer syntactically, but at least this new one works.

[ric-cardo]

i got it working (using beta-11) by renaming the selector from router-outlet to auth-router-outlet

[freshprinze]

@ric-cardo Working with beta-9 too. Downgraded to beta-9 because of breaking changes.

[ComFreek]

In addition to using the non-minified router, I had to use the non-minified version of Angular 2 as well, e.g. https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.14/angular2.js instead of angular2.{dev|min}.js.

[IAMtheIAM]

I still get this Primary outlet is already registered. error when trying to use a child route. RC1 angular2

[vladsava87]

I managed to get it to work by using this filter in app.component and other components with internal routing:

directives: [ROUTER_DIRECTIVES.filter(direc => direc != RouterOutlet), OverwittenRouterOutlet, ...]