search

Adobe-Marketing-Cloud / aem-guides-wknd-events

Step by Step guide to creating a Single Page Application to use with AEM
48 stars 34 forks source link

[Angular] Routing on AEM route with parameter gives a "Forbidden error" #84

Open ChetanaAdige opened 4 years ago

ChetanaAdige commented 4 years ago

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

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

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

godanny86 commented 4 years ago

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?

ChetanaAdige commented 4 years ago

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 notifications@github.com Sent: Monday, May 18, 2020 12:27 PM To: Adobe-Marketing-Cloud/aem-guides-wknd-events aem-guides-wknd-events@noreply.github.com Cc: Adige, Chetana chetana.adige@optum.com; Mention mention@noreply.github.com Subject: Re: [Adobe-Marketing-Cloud/aem-guides-wknd-events] [Angular] Routing on AEM route with parameter gives a "Forbidden error" (#84)

hi @ChetanaAdigehttps://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 GitHubhttps://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/issues/84#issuecomment-630327556, or unsubscribehttps://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.

godanny86 commented 4 years ago

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
ChetanaAdige commented 4 years ago

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 notifications@github.com Sent: Monday, May 18, 2020 2:25 PM To: Adobe-Marketing-Cloud/aem-guides-wknd-events aem-guides-wknd-events@noreply.github.com Cc: Adige, Chetana chetana.adige@optum.com; Mention mention@noreply.github.com 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 GitHubhttps://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/issues/84#issuecomment-630388663, or unsubscribehttps://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.

godanny86 commented 4 years ago

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...

ChetanaAdige commented 4 years ago

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 notifications@github.com Sent: Monday, May 18, 2020 2:39 PM To: Adobe-Marketing-Cloud/aem-guides-wknd-events aem-guides-wknd-events@noreply.github.com Cc: Adige, Chetana chetana.adige@optum.com; Mention mention@noreply.github.com 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 GitHubhttps://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/issues/84#issuecomment-630395232, or unsubscribehttps://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.

godanny86 commented 4 years ago

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

image

ChetanaAdige commented 4 years ago

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 notifications@github.com Sent: Monday, May 18, 2020 3:56 PM To: Adobe-Marketing-Cloud/aem-guides-wknd-events aem-guides-wknd-events@noreply.github.com Cc: Adige, Chetana chetana.adige@optum.com; Mention mention@noreply.github.com 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 GitHubhttps://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/issues/84#issuecomment-630430263, or unsubscribehttps://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.

godanny86 commented 4 years ago

yes it works in both cases. Is the XHR call to *.model.json broken when you add a query parameter to the url?

ChetanaAdige commented 4 years ago

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 notifications@github.com Sent: Monday, May 18, 2020 4:15 PM To: Adobe-Marketing-Cloud/aem-guides-wknd-events aem-guides-wknd-events@noreply.github.com Cc: Adige, Chetana chetana.adige@optum.com; Mention mention@noreply.github.com 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 GitHubhttps://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/issues/84#issuecomment-630438782, or unsubscribehttps://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.

godanny86 commented 4 years ago

Then that means /content/wknd-events/react/home/first-article.html doesn't exist as an AEM page. right?

ChetanaAdige commented 4 years ago

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 notifications@github.com Sent: Monday, May 18, 2020 4:22 PM To: Adobe-Marketing-Cloud/aem-guides-wknd-events aem-guides-wknd-events@noreply.github.com Cc: Adige, Chetana chetana.adige@optum.com; Mention mention@noreply.github.com 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 GitHubhttps://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/issues/84#issuecomment-630442120, or unsubscribehttps://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.

godanny86 commented 4 years ago

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...

ChetanaAdige commented 4 years ago

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 notifications@github.com Sent: Monday, May 18, 2020 4:32 PM To: Adobe-Marketing-Cloud/aem-guides-wknd-events aem-guides-wknd-events@noreply.github.com Cc: Adige, Chetana chetana.adige@optum.com; Mention mention@noreply.github.com 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 GitHubhttps://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/issues/84#issuecomment-630446145, or unsubscribehttps://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.

godanny86 commented 4 years ago

Yes good idea. Pleas post the link to your repo when you have it up

fusionproj commented 4 years ago

@godanny86 I'm not getting location inside my props object. Can you please share your working example for this.