Mixing
Angular router.redirect doesn't populate variables
I am using Stripe checkout with my Angular 5 project and seem to be stuck on a router redirect / template lifecycle issue.
On user signup, I open the stripe checkout modal. When that modal get's a payment source token, I do some more API work and then do a router.redirect.
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.router.navigate(['stylist/profile']);
});
}
});
The app redirects properly, but the variables do not display whatsoever. Below is an example of my page. Ideally, the redirect would trigger the ngOnInit and the test variable would be true. In my scenario, the test is displayed in the html template as blank.
Profile Route
{ path: 'stylist/profile', component: ProfilePageComponent, canActivate: [AuthGuard] },
Auth Guard
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(
public auth: AuthService,
public router: Router,
public route: ActivatedRoute
) {}
canActivate(): boolean {
if (!this.auth.isAuthenticated()) {
this.router.navigate(['']);
return false;
}
return true;
}
}
Profile Page Component
export class ProfilePageComponent implements OnInit {
test: boolean = false;
ngOnInit() {
this.test = true;
}
}
Profile Page HTML
<div>Test variable: {{test}}</div>
This code has been simplified, but I wanted to make sure I wasn't missing any strange lifecycle events due to redirecting in a callback of a callback?
I've tried subscribing to various Router and ActivatedRoute events without any luck. I've also seen solutions involving ngZone, but those didn't seem to fit the bill either.
01/07/19 UPDATE
I was able to recreate this via stackblitz per the suggestion in the comments.
https://stackblitz.com/edit/angular-un9tfk
Upon initial load of the homepage, you can click the "Open Stripe" button and fill out some dummy data. The callback then redirects to /test with a warning message in the console.
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
I believe this points me to doing ngZone.run()... somewhere in my signup.component.ts, but not sure where just yet.
javascript
angular stripe-payments asked Jan 1 at 23:35
Don BootsDon Boots
553421
|
show 1 more comment
I am using Stripe checkout with my Angular 5 project and seem to be stuck on a router redirect / template lifecycle issue.
On user signup, I open the stripe checkout modal. When that modal get's a payment source token, I do some more API work and then do a router.redirect.
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.router.navigate(['stylist/profile']);
});
}
});
The app redirects properly, but the variables do not display whatsoever. Below is an example of my page. Ideally, the redirect would trigger the ngOnInit and the test variable would be true. In my scenario, the test is displayed in the html template as blank.
Profile Route
{ path: 'stylist/profile', component: ProfilePageComponent, canActivate: [AuthGuard] },
Auth Guard
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(
public auth: AuthService,
public router: Router,
public route: ActivatedRoute
) {}
canActivate(): boolean {
if (!this.auth.isAuthenticated()) {
this.router.navigate(['']);
return false;
}
return true;
}
}
Profile Page Component
export class ProfilePageComponent implements OnInit {
test: boolean = false;
ngOnInit() {
this.test = true;
}
}
Profile Page HTML
<div>Test variable: {{test}}</div>
This code has been simplified, but I wanted to make sure I wasn't missing any strange lifecycle events due to redirecting in a callback of a callback?
I've tried subscribing to various Router and ActivatedRoute events without any luck. I've also seen solutions involving ngZone, but those didn't seem to fit the bill either.
01/07/19 UPDATE
I was able to recreate this via stackblitz per the suggestion in the comments.
https://stackblitz.com/edit/angular-un9tfk
Upon initial load of the homepage, you can click the "Open Stripe" button and fill out some dummy data. The callback then redirects to /test with a warning message in the console.
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
I believe this points me to doing ngZone.run()... somewhere in my signup.component.ts, but not sure where just yet.
javascript
angular stripe-payments asked Jan 1 at 23:35
Don BootsDon Boots
553421
1
Is stylist/profile the same page from where you trigger it? Or is it actually another route?
– Ingo Bürk
Jan 1 at 23:45
Showing the route declarations would help.
– Keenan Diggs
Jan 1 at 23:46
@IngoBürk The stripe snippet lives inside a signup component and is displayed on a home page currently. If I remove the stripe callback and just do a redirect, it seems to work.
– Don Boots
Jan 2 at 0:20
1
Generally speaking this should work, so reproducing this in a Stackblitz would be helpful since I suspect that your question is so oversimplified (or incomplete) that the issue is hidden.
– Ingo Bürk
Jan 2 at 1:49
I'll try and recreate it in that. I haven't heard of that environment!
– Don Boots
Jan 2 at 6:29
|
show 1 more comment
I am using Stripe checkout with my Angular 5 project and seem to be stuck on a router redirect / template lifecycle issue.
On user signup, I open the stripe checkout modal. When that modal get's a payment source token, I do some more API work and then do a router.redirect.
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.router.navigate(['stylist/profile']);
});
}
});
The app redirects properly, but the variables do not display whatsoever. Below is an example of my page. Ideally, the redirect would trigger the ngOnInit and the test variable would be true. In my scenario, the test is displayed in the html template as blank.
Profile Route
{ path: 'stylist/profile', component: ProfilePageComponent, canActivate: [AuthGuard] },
Auth Guard
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(
public auth: AuthService,
public router: Router,
public route: ActivatedRoute
) {}
canActivate(): boolean {
if (!this.auth.isAuthenticated()) {
this.router.navigate(['']);
return false;
}
return true;
}
}
Profile Page Component
export class ProfilePageComponent implements OnInit {
test: boolean = false;
ngOnInit() {
this.test = true;
}
}
Profile Page HTML
<div>Test variable: {{test}}</div>
This code has been simplified, but I wanted to make sure I wasn't missing any strange lifecycle events due to redirecting in a callback of a callback?
I've tried subscribing to various Router and ActivatedRoute events without any luck. I've also seen solutions involving ngZone, but those didn't seem to fit the bill either.
01/07/19 UPDATE
I was able to recreate this via stackblitz per the suggestion in the comments.
https://stackblitz.com/edit/angular-un9tfk
Upon initial load of the homepage, you can click the "Open Stripe" button and fill out some dummy data. The callback then redirects to /test with a warning message in the console.
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
I believe this points me to doing ngZone.run()... somewhere in my signup.component.ts, but not sure where just yet.
javascript
angular stripe-payments asked Jan 1 at 23:35
Don BootsDon Boots
553421
I am using Stripe checkout with my Angular 5 project and seem to be stuck on a router redirect / template lifecycle issue.
On user signup, I open the stripe checkout modal. When that modal get's a payment source token, I do some more API work and then do a router.redirect.
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.router.navigate(['stylist/profile']);
});
}
});
The app redirects properly, but the variables do not display whatsoever. Below is an example of my page. Ideally, the redirect would trigger the ngOnInit and the test variable would be true. In my scenario, the test is displayed in the html template as blank.
Profile Route
{ path: 'stylist/profile', component: ProfilePageComponent, canActivate: [AuthGuard] },
Auth Guard
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(
public auth: AuthService,
public router: Router,
public route: ActivatedRoute
) {}
canActivate(): boolean {
if (!this.auth.isAuthenticated()) {
this.router.navigate(['']);
return false;
}
return true;
}
}
Profile Page Component
export class ProfilePageComponent implements OnInit {
test: boolean = false;
ngOnInit() {
this.test = true;
}
}
Profile Page HTML
<div>Test variable: {{test}}</div>
This code has been simplified, but I wanted to make sure I wasn't missing any strange lifecycle events due to redirecting in a callback of a callback?
I've tried subscribing to various Router and ActivatedRoute events without any luck. I've also seen solutions involving ngZone, but those didn't seem to fit the bill either.
01/07/19 UPDATE
I was able to recreate this via stackblitz per the suggestion in the comments.
https://stackblitz.com/edit/angular-un9tfk
Upon initial load of the homepage, you can click the "Open Stripe" button and fill out some dummy data. The callback then redirects to /test with a warning message in the console.
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
I believe this points me to doing ngZone.run()... somewhere in my signup.component.ts, but not sure where just yet.
javascript
angular stripe-payments javascript
angular stripe-payments asked Jan 1 at 23:35
Don BootsDon Boots
553421
asked Jan 1 at 23:35
Don BootsDon Boots
553421
edited Jan 7 at 16:18
Don Boots
asked Jan 1 at 23:35
Don BootsDon Boots
553421
asked Jan 1 at 23:35
Don BootsDon Boots
553421
asked Jan 1 at 23:35
Don BootsDon Boots
553421
553421
1
Is stylist/profile the same page from where you trigger it? Or is it actually another route?
– Ingo Bürk
Jan 1 at 23:45
Showing the route declarations would help.
– Keenan Diggs
Jan 1 at 23:46
@IngoBürk The stripe snippet lives inside a signup component and is displayed on a home page currently. If I remove the stripe callback and just do a redirect, it seems to work.
– Don Boots
Jan 2 at 0:20
1
Generally speaking this should work, so reproducing this in a Stackblitz would be helpful since I suspect that your question is so oversimplified (or incomplete) that the issue is hidden.
– Ingo Bürk
Jan 2 at 1:49
I'll try and recreate it in that. I haven't heard of that environment!
– Don Boots
Jan 2 at 6:29
|
show 1 more comment
1
Is stylist/profile the same page from where you trigger it? Or is it actually another route?
– Ingo Bürk
Jan 1 at 23:45
Showing the route declarations would help.
– Keenan Diggs
Jan 1 at 23:46
@IngoBürk The stripe snippet lives inside a signup component and is displayed on a home page currently. If I remove the stripe callback and just do a redirect, it seems to work.
– Don Boots
Jan 2 at 0:20
1
Generally speaking this should work, so reproducing this in a Stackblitz would be helpful since I suspect that your question is so oversimplified (or incomplete) that the issue is hidden.
– Ingo Bürk
Jan 2 at 1:49
I'll try and recreate it in that. I haven't heard of that environment!
– Don Boots
Jan 2 at 6:29
1
1
Is stylist/profile the same page from where you trigger it? Or is it actually another route?
– Ingo Bürk
Jan 1 at 23:45
Is stylist/profile the same page from where you trigger it? Or is it actually another route?
– Ingo Bürk
Jan 1 at 23:45
Showing the route declarations would help.
– Keenan Diggs
Jan 1 at 23:46
Showing the route declarations would help.
– Keenan Diggs
Jan 1 at 23:46
@IngoBürk The stripe snippet lives inside a signup component and is displayed on a home page currently. If I remove the stripe callback and just do a redirect, it seems to work.
– Don Boots
Jan 2 at 0:20
@IngoBürk The stripe snippet lives inside a signup component and is displayed on a home page currently. If I remove the stripe callback and just do a redirect, it seems to work.
– Don Boots
Jan 2 at 0:20
1
1
Generally speaking this should work, so reproducing this in a Stackblitz would be helpful since I suspect that your question is so oversimplified (or incomplete) that the issue is hidden.
– Ingo Bürk
Jan 2 at 1:49
Generally speaking this should work, so reproducing this in a Stackblitz would be helpful since I suspect that your question is so oversimplified (or incomplete) that the issue is hidden.
– Ingo Bürk
Jan 2 at 1:49
I'll try and recreate it in that. I haven't heard of that environment!
– Don Boots
Jan 2 at 6:29
I'll try and recreate it in that. I haven't heard of that environment!
– Don Boots
Jan 2 at 6:29
|
show 1 more comment
1 Answer
1
active
oldest
votes
As stated in the edit above, it turns out using Router.navigate in a function callback is technically outside of an Angular zone.
Wrapping my Router.navigate in NgZone.run(() => {}) did the trick.
Implemented solution:
import { Component, Input, NgZone } from '@angular/core';
constructor(private zone: NgZone) { }
signup() {
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.zone.run(() => {
this.router.navigate(['stylist/profile']);
});
});
}
});
}
answered Jan 7 at 17:56
Don BootsDon Boots
553421
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999775%2fangular-router-redirect-doesnt-populate-variables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As stated in the edit above, it turns out using Router.navigate in a function callback is technically outside of an Angular zone.
Wrapping my Router.navigate in NgZone.run(() => {}) did the trick.
Implemented solution:
import { Component, Input, NgZone } from '@angular/core';
constructor(private zone: NgZone) { }
signup() {
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.zone.run(() => {
this.router.navigate(['stylist/profile']);
});
});
}
});
}
answered Jan 7 at 17:56
Don BootsDon Boots
553421
add a comment |
As stated in the edit above, it turns out using Router.navigate in a function callback is technically outside of an Angular zone.
Wrapping my Router.navigate in NgZone.run(() => {}) did the trick.
Implemented solution:
import { Component, Input, NgZone } from '@angular/core';
constructor(private zone: NgZone) { }
signup() {
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.zone.run(() => {
this.router.navigate(['stylist/profile']);
});
});
}
});
}
answered Jan 7 at 17:56
Don BootsDon Boots
553421
add a comment |
As stated in the edit above, it turns out using Router.navigate in a function callback is technically outside of an Angular zone.
Wrapping my Router.navigate in NgZone.run(() => {}) did the trick.
Implemented solution:
import { Component, Input, NgZone } from '@angular/core';
constructor(private zone: NgZone) { }
signup() {
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.zone.run(() => {
this.router.navigate(['stylist/profile']);
});
});
}
});
}
answered Jan 7 at 17:56
Don BootsDon Boots
553421
As stated in the edit above, it turns out using Router.navigate in a function callback is technically outside of an Angular zone.
Wrapping my Router.navigate in NgZone.run(() => {}) did the trick.
Implemented solution:
import { Component, Input, NgZone } from '@angular/core';
constructor(private zone: NgZone) { }
signup() {
stripe.open({
email: 'foo@foo.com',
name: 'Subscription',
description: 'Basic Plan',
amount: 499,
token: (source) => {
this.http.post('/user/subscribe', { source: source.id }).subscribe(_ => {
this.zone.run(() => {
this.router.navigate(['stylist/profile']);
});
});
}
});
}
answered Jan 7 at 17:56
Don BootsDon Boots
553421
answered Jan 7 at 17:56
Don BootsDon Boots
553421
answered Jan 7 at 17:56
Don BootsDon Boots
553421
answered Jan 7 at 17:56
Don BootsDon Boots
553421
553421
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999775%2fangular-router-redirect-doesnt-populate-variables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Is stylist/profile the same page from where you trigger it? Or is it actually another route?
– Ingo Bürk
Jan 1 at 23:45
Showing the route declarations would help.
– Keenan Diggs
Jan 1 at 23:46
@IngoBürk The stripe snippet lives inside a signup component and is displayed on a home page currently. If I remove the stripe callback and just do a redirect, it seems to work.
– Don Boots
Jan 2 at 0:20
1
Generally speaking this should work, so reproducing this in a Stackblitz would be helpful since I suspect that your question is so oversimplified (or incomplete) that the issue is hidden.
– Ingo Bürk
Jan 2 at 1:49
I'll try and recreate it in that. I haven't heard of that environment!
– Don Boots
Jan 2 at 6:29