Cant preview prismic page in my angular application

We followed all the steps in guide and troubleshooting.
Still unable to preview my prismic page in my configured website

Hi Devashish,

Welcome to the community!

Can you describe to me further what behaviour or errors you are actually experiencing, preferably with screenshots or screen recordings?

Thanks.

I can see the toolbar but content is not displayed on page.

It looks like it’s not redirecting from the preview page. Have you set up you link resolver to include all the correct paths?
https://prismic.io/docs/javascript/beyond-the-api/link-resolving

In my case, I can’t redirect to “/” as it automatically will redirect to “/login” page which is existing behaviour.
Is it possible for you to help me on a call?
May be a google meet call or something.

From experience I find working through text chat like this much more effective.

But this sounds like your issue. If the link resolver cannot be accessed to direct the data to the correct page then it won’t work.

Can you share with me your link resolver code? Also if you could tell me the different routes that you custom types use in your project that would be great.

Firstly I need to understand which page should it redirect to?
Should there be any code to display prismic content on that page?

The link resolver is used for redirecting any content that comes from prismic to the pages in your local project. Usually based on custom types or uid values. So you create the logic to send the data to the correct page.

We’ve created a series of articles for Angular with one specifically about previews, check it out and let me know it helps :slight_smile:

1 Like

Thanks phil,

Do you have a similar example of .net rest API?

I followed the approach to get the preview token from url and get the document via rest API in .net.

I could do it for published content. But I need help for unpublished content.
That is the reason I asked for example of .net rest API. Can you please help?

Hi Devashish,

Did you manage to get this working? I sorry about the late reply, this on slipped away from me, I can only apologise.

The final issue you described, "the unplublished content previews" sounds like the preview script wasn't included in your 404 page.

Can you confirm this?

Thanks Phil! been struggling for a long time with as I was new the framework and Prismic .

Working in Prismic and Angular 14 now

1 Like

@Phil HI Phil
I was working through the models you provided. Since Angular has introduce the HttpClientModule
Angular want a dev to use the Observable wrapper Type. and HttpClient . Do have insight on implementing this into the prismic service or prisimic configuration in your Angular 9 example?
Sample
Angular14 Prismic App 2022 (forked) - StackBlitz
https://angular-ivy-tk3ma1.stackblitz.io

Thank you

Hi Tico,

Unfortunately, I haven't had any experience with Angular, but I'll check with the team.

Ok thank you !

My colleague got back to me with some info for you :slight_smile: :

"I don’t have experience with Angular, but I see that the user is using @prismicio/client. Our client library is built around the Fetch API and allows providing a custom Fetch implementation. Although we support custom Fetch implementations, the implementation must conform to the Fetch API, which Angular’s HttpClient does not. I would recommend one of the following approaches, but I’m not sure if there’s a better way to handle non-Angular specific libraries":

  1. Use @prismicio/client’s query methods as is and convert the returned Promises to RxJS Observables. This should be possible with RxJS’s from() function
mport { from } from 'rxjs'
import * as prismic from 'prismic'

const client = prismic.createClient('your-repo-name')

const result = from(client.getByUID('page', 'home'))
// result is now an Observable
  1. Use @prismicio/client’s query methods and use the returned Promises directly. Some RxJS operators accept Promises and do not require conversion with from().