Open dieuhd opened 8 years ago
Did you try cloning the latest? Just updated to beta.9 :)
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.
@chenkie: After update angular to beta 9, this error occurred @kukicadnan: I am using non-minified version.
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.
@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?
@kukicadnan Here are my code:
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"]);
}
}
"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"
}
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.
i got it working (using beta-11) by renaming the selector from router-outlet to auth-router-outlet
@ric-cardo Working with beta-9 too. Downgraded to beta-9 because of breaking changes.
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
.
I still get this Primary outlet is already registered.
error when trying to use a child route. RC1 angular2
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, ...]
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