shun
shun

Reputation: 245

angular2 route not working

i use angular2 rc3 and angular2/router 3.0.0-alpha.8 to do my router: here is my code:

bootstrap(AppComponent, [HTTP_PROVIDERS, APP_ROUTER_PROVIDERS, AUTH_PROVIDERS,
    {
        provide: AuthHttp,
        useFactory: (http:Http) => new AuthHttp(new AuthConfig({tokenName: 'jwt'}), http),
        deps: [Http]
    },
    {
        provide: TranslateLoader,
        useFactory: (http:Http) => new TranslateStaticLoader(http, 'app/i18n', '.json'),
        deps: [Http]
    },
    {provide: LocationStrategy, useClass: PathLocationStrategy},
    // use TranslateService here, and not TRANSLATE_PROVIDERS (which will define a default TranslateStaticLoader)
    TranslateService,
    ApiService,
    CookieService,
    AuthenticationService

]).catch(err => console.error(err));

my router is:

export const routes:RouterConfig = [
    ...AccountRouters,
    ...DealOverviewRouters

];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];


export const AccountRouters: RouterConfig = [
    {
        path: 'account', component: AccountComponent
    },
    {
        path: 'login', component: LoginComponent
    },
];

export const DealOverviewRouters:RouterConfig = [
    {
        path: '',
        redirectTo: '/deal-overview',
        terminal: true
    },
    {
        path: 'deal-overview', component: DealOverviewComponent
    }
];

then in my app.component.ts:

constructor(public translate:TranslateService, private _service: AuthenticationService, private _router: Router) {
        this.isLogin = _service.isLogin;
        console.log(_service.isLogin);
}

ngOnInit() {
        // this._service.checkCredentials();
        if(!this.isLogin) {
           console.log(1111);
            this._router.navigateByUrl('/login');
        }
}

it's really print 1111 on my console log; but the redirect to /login not working.

I can visit my localhost:3000/login page directly and nothing error. but only this._router.navigateByUrl('/login') not working.

Upvotes: 0

Views: 977

Answers (1)

Colum
Colum

Reputation: 986

I've had issues with the following syntax with the new router:

export const routes:RouterConfig = [
    ...AccountRouters,
    ...DealOverviewRouters
];

instead, manually place them all into the one const and try that:

export const routes:RouterConfig = [
    {
        path: '',
        redirectTo: '/deal-overview',
        terminal: true
    },
    {
        path: 'deal-overview', component: DealOverviewComponent
    },
    {
        path: 'account', component: AccountComponent
    },
    {
        path: 'login', component: LoginComponent
    }
];

Upvotes: 1

Related Questions