This repository has been archived by the owner on Jun 13, 2020. It is now read-only.
[Angular] Routing on AEM route with parameter gives a "Forbidden error" #84
Assignees
Comments
|
hi @ChetanaAdige, to be clear this is not an error directly related to steps in the tutorial? Instead you are attempting to add a query parameter to an exiting url? Can you post an example of the URL you are trying to create? Does the route work when navigating through the SPA but fails when trying a full page refresh to the deep link? |
|
Hi :
Thanks for responding. I have used the Angular version of the tutorial.
I was trying to trigger a route to a page in AEM with a parameter on a click event. The parameter is something similar to this which is triggered on click in an angular component
triggerClick(article) {
this.router.navigateByUrl([`/content/wknd-events/angular/home/first-article/${article}`]);
}
Here is the url that it navigates to
This works fine and components and AEM data is rendered as expected ; however on reloading the above url , it gives a 404 error
I have added this route in the Routes definition in app-routing.module.ts
http://localhost:4502/editor.html/content/wknd-events/react/home/first-article/A001
I was not able to find any documentation related to routing with url parameters in this SPA architecture . Any suggestions or documentation is highly appreciated
Thanks,
Chetana
From: Daniel Gordon <[email protected]>
Sent: Monday, May 18, 2020 12:27 PM
To: Adobe-Marketing-Cloud/aem-guides-wknd-events <[email protected]>
Cc: Adige, Chetana <[email protected]>; Mention <[email protected]>
Subject: Re: [Adobe-Marketing-Cloud/aem-guides-wknd-events] [Angular] Routing on AEM route with parameter gives a "Forbidden error" (#84)
hi @ChetanaAdige<https://github.com/ChetanaAdige>, to be clear this is not an error directly related to steps in the tutorial?
Instead you are attempting to add a query parameter to an exiting url? Can you post an example of the URL you are trying to create?
Does the route work when navigating through the SPA but fails when trying a full page refresh to the deep link?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#84 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APT2KIFWZFCLAJQHLM5A6HLRSFVXLANCNFSM4NDSJSDQ>.
This e-mail, including attachments, may include confidential and/or
proprietary information, and may be used only by the person or entity
to which it is addressed. If the reader of this e-mail is not the intended
recipient or his or her authorized agent, the reader is hereby notified
that any dissemination, distribution or copying of this e-mail is
prohibited. If you have received this e-mail in error, please notify the
sender by replying to this message and delete this e-mail immediately.
|
|
yes, I would expect a 404, since you are not using a query parameter, but rather an additional path. AEM will interpret that as a brand new request. A query parameter would look like this: /content/wknd-events/react/home/first-article.html?articleID=A0001 |
|
I have tried using query parameters as well like the way you described. Even with a query parameter , it does not render the angular components on reload as it is unable to find the path in AEM. Can you share If you have an example that is working with the query parameter scenario?
Thanks in advance.
Thanks,
Chetana
From: Daniel Gordon <[email protected]>
Sent: Monday, May 18, 2020 2:25 PM
To: Adobe-Marketing-Cloud/aem-guides-wknd-events <[email protected]>
Cc: Adige, Chetana <[email protected]>; Mention <[email protected]>
Subject: Re: [Adobe-Marketing-Cloud/aem-guides-wknd-events] [Angular] Routing on AEM route with parameter gives a "Forbidden error" (#84)
yes, I would expect a 404, since you are not using a query parameter, but rather an additional path. AEM will interpret that as a brand new request. A query parameter would look like this:
/content/wknd-events/react/home/first-article.html?articleID=A0001
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#84 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APT2KIHFDWAS27TUMXCXR23RSGDPPANCNFSM4NDSJSDQ>.
This e-mail, including attachments, may include confidential and/or
proprietary information, and may be used only by the person or entity
to which it is addressed. If the reader of this e-mail is not the intended
recipient or his or her authorized agent, the reader is hereby notified
that any dissemination, distribution or copying of this e-mail is
prohibited. If you have received this e-mail in error, please notify the
sender by replying to this message and delete this e-mail immediately.
|
|
Sorry, I don't have a working example. I think you will need to create at a minimum a page in AEM that is a real page i.e |
|
I have this setup just like you described .
AN AEM page called home – has a component called course-tile container with 3 course tiles (can have more) Each has a button that when clicked routes to a course detail page . The course Id is passed as a parameter to the course detail page . The components inside the course detail page look for that course Id and render data in the components after filtering for that course Id.
As mentioned all this works when the page is routed for the first time . It doesn’t load any data on reload of the page – It fails to get the JSON content for the components if the query string parameter is passed
And gives a 404 error if the course Id is added at the end of the url
Thanks,
Chetana
From: Daniel Gordon <[email protected]>
Sent: Monday, May 18, 2020 2:39 PM
To: Adobe-Marketing-Cloud/aem-guides-wknd-events <[email protected]>
Cc: Adige, Chetana <[email protected]>; Mention <[email protected]>
Subject: Re: [Adobe-Marketing-Cloud/aem-guides-wknd-events] [Angular] Routing on AEM route with parameter gives a "Forbidden error" (#84)
Sorry, I don't have a working example. I think you will need to create at a minimum a page in AEM that is a real page i.e /content/wknd-events/agular/home/first-article.html. You may want to use a different resourceType. On the SPA side that page can be "empty" in that it does not render anything and just redirects to the appropriate route based on the query parameter. if no query parameter is present then maybe it just redirects to a 404 or the home page...
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#84 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APT2KIEYZCB5VI3DMUUZDU3RSGFF7ANCNFSM4NDSJSDQ>.
This e-mail, including attachments, may include confidential and/or
proprietary information, and may be used only by the person or entity
to which it is addressed. If the reader of this e-mail is not the intended
recipient or his or her authorized agent, the reader is hereby notified
that any dissemination, distribution or copying of this e-mail is
prohibited. If you have received this e-mail in error, please notify the
sender by replying to this message and delete this e-mail immediately.
|
|
The course detail page that you describe, is this a real AEM page? Then it should render just fine with or without parameters. "It fails to get the JSON content for the components if the query string parameter is passed" -> I haven't observed this before. The JSON model seems to work fine when adding query parameters... I can post an example w/ React if that would help...
|
|
Thanks. What happens if you reload the page with query params ? It renders fine for me too, the issue is that it breaks on reloading the page
Thanks
From: Daniel Gordon <[email protected]>
Sent: Monday, May 18, 2020 3:56 PM
To: Adobe-Marketing-Cloud/aem-guides-wknd-events <[email protected]>
Cc: Adige, Chetana <[email protected]>; Mention <[email protected]>
Subject: Re: [Adobe-Marketing-Cloud/aem-guides-wknd-events] [Angular] Routing on AEM route with parameter gives a "Forbidden error" (#84)
The course detail page that you describe, is this a real AEM page? Then it should render just fine with or without parameters. "It fails to get the JSON content for the components if the query string parameter is passed" -> I haven't observed this before. The JSON model seems to work fine when adding query parameters...
I can post an example w/ React if that would help...
[image]<https://user-images.githubusercontent.com/8974514/82258474-c90ebe80-990e-11ea-88b3-04598ef1bd0b.png>
[image]<https://user-images.githubusercontent.com/8974514/82258638-0a06d300-990f-11ea-82e4-5a598e476ba6.png>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#84 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APT2KIH3CFMQ7TFKDAN4DDTRSGOEPANCNFSM4NDSJSDQ>.
This e-mail, including attachments, may include confidential and/or
proprietary information, and may be used only by the person or entity
to which it is addressed. If the reader of this e-mail is not the intended
recipient or his or her authorized agent, the reader is hereby notified
that any dissemination, distribution or copying of this e-mail is
prohibited. If you have received this e-mail in error, please notify the
sender by replying to this message and delete this e-mail immediately.
|
|
yes it works in both cases. Is the XHR call to *.model.json broken when you add a query parameter to the url? |
|
When I pass in the query parameter and route to the page , it renders the JSON
When I reload the highlighted portion gets removed and in the XHR , I get a 404 for the first-article.model.json
/content/wknd-events/react/home/first-article.html?articleID=A0001
Thanks,
Chetana
From: Daniel Gordon <[email protected]>
Sent: Monday, May 18, 2020 4:15 PM
To: Adobe-Marketing-Cloud/aem-guides-wknd-events <[email protected]>
Cc: Adige, Chetana <[email protected]>; Mention <[email protected]>
Subject: Re: [Adobe-Marketing-Cloud/aem-guides-wknd-events] [Angular] Routing on AEM route with parameter gives a "Forbidden error" (#84)
yes it works in both cases. Is the XHR call to *.model.json broken when you add a query parameter to the url?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#84 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APT2KIAE7ZDXIACWXMHFLX3RSGQMVANCNFSM4NDSJSDQ>.
This e-mail, including attachments, may include confidential and/or
proprietary information, and may be used only by the person or entity
to which it is addressed. If the reader of this e-mail is not the intended
recipient or his or her authorized agent, the reader is hereby notified
that any dissemination, distribution or copying of this e-mail is
prohibited. If you have received this e-mail in error, please notify the
sender by replying to this message and delete this e-mail immediately.
|
|
Then that means /content/wknd-events/react/home/first-article.html doesn't exist as an AEM page. right? |
|
Yes, but it was there on initial routing and url is still in that session. Why would it not exist on reload?
From: Daniel Gordon <[email protected]>
Sent: Monday, May 18, 2020 4:22 PM
To: Adobe-Marketing-Cloud/aem-guides-wknd-events <[email protected]>
Cc: Adige, Chetana <[email protected]>; Mention <[email protected]>
Subject: Re: [Adobe-Marketing-Cloud/aem-guides-wknd-events] [Angular] Routing on AEM route with parameter gives a "Forbidden error" (#84)
Then that means /content/wknd-events/react/home/first-article.html doesn't exist as an AEM page. right?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#84 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APT2KIA7BF3DX6SQWPG5RXTRSGRIHANCNFSM4NDSJSDQ>.
This e-mail, including attachments, may include confidential and/or
proprietary information, and may be used only by the person or entity
to which it is addressed. If the reader of this e-mail is not the intended
recipient or his or her authorized agent, the reader is hereby notified
that any dissemination, distribution or copying of this e-mail is
prohibited. If you have received this e-mail in error, please notify the
sender by replying to this message and delete this e-mail immediately.
|
|
On reload it is a full request back to the server :). When you navigate via the SPA the JS, CSS and JSON are already loaded and you never hit the server for these types of artificial routes. You should create a real AEM page and pass query parameters to it... |
|
Yes, thank you. As far as I have it , it is a page in AEM that I created to which I am passing in parameters . It is exactly like how you have it, except mine is in NG rather than React
I understood that it hits a full request back to the server. The same works for other pages w/o parameters
I shall try to make a branch and check it in
Thanks,
Chetana
From: Daniel Gordon <[email protected]>
Sent: Monday, May 18, 2020 4:32 PM
To: Adobe-Marketing-Cloud/aem-guides-wknd-events <[email protected]>
Cc: Adige, Chetana <[email protected]>; Mention <[email protected]>
Subject: Re: [Adobe-Marketing-Cloud/aem-guides-wknd-events] [Angular] Routing on AEM route with parameter gives a "Forbidden error" (#84)
On reload it is a full request back to the server :). When you navigate via the SPA the JS, CSS and JSON are already loaded and you never hit the server for these types of artificial routes. You should create a real AEM page and pass query parameters to it...
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#84 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APT2KIH2SZOQJRLY3O45KYLRSGSLLANCNFSM4NDSJSDQ>.
This e-mail, including attachments, may include confidential and/or
proprietary information, and may be used only by the person or entity
to which it is addressed. If the reader of this e-mail is not the intended
recipient or his or her authorized agent, the reader is hereby notified
that any dissemination, distribution or copying of this e-mail is
prohibited. If you have received this e-mail in error, please notify the
sender by replying to this message and delete this e-mail immediately.
|
|
Yes good idea. Pleas post the link to your repo when you have it up |
|
@godanny86 I'm not getting location inside my props object. Can you please share your working example for this. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Local Environment
Before filing an issue verify that the prerequisite tools/software are installed:
Describe the issue
A clear and concise description of what the issue is.
Where in the tutorial are you experiencing an issue?
In Chapter 2 Setting up Angular routes and page resolution
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Using this.router.navigate with queryParams to route to a page in AEM gives a "Forbidden error"
when re-loading that page
the AEMPageDataResolver that is used to return the resource path probably removes the parameters and the page does not render the AEM content
The text was updated successfully, but these errors were encountered: