So far I've mostly been able to follow it, but I'm getting hung up on the SSR hack.
index.html files are being created for all the appropriate routes (i.e., one for each corresponding .md file). And they are drawing from the appropriate component.
However, each index.html file only has
where the actual content from the .md file should be.
Does anything come to mind as where to look for the problem? I'm new to Angular Universal and have exhausted everything I can think of.
I'm attempting something similar with Angular Universal and the pre-renderer in v9. I am having the same issue, with the <markdown> element in the generated html file but no content.
I thought it was related to HttpClient request for the markdown, so I had some scripts which will generate an articles.ts file at build time with all of the markdown, routes, etc. (it also generates my routes.txt file for prerendering). The markdown gets base64-encoded to put into the array. Then the component loads the data from articles.ts, converts it back to ASCII, and puts it in the [data] binding of the <markdown> element.
Now HttpClient was removed from the equation and the content is all available in TypeScript when the pre-renderer runs, however the result is the same - an empty <markdown> element in the rendered HTML.
The odd thing is that I have a "blog" page that lists the articles with thumbnails, data that is also pulled from the same file. It doesn't use ngx-markdown but just creates some cards with normal elements and Angular bindings. That page gets successfully rendered, with the data from the articles.ts file statically in the HTML.
I think it has something to do with the way ngx-markdown works, probably how it calls out to marked for the parsing.
I stripped out ngx-markdown and tried using marked directly with the same result.
I did have some success loading the markdown with HttpClient and using marked. The prerender fails on the HTTP requests however if i use http://localhost:4300 in the URLs and run another copy of the app while I'm prerendering, it can successfully find the markdown files and renders properly. If i can just figure out why the relative URL calls are failing, I'll be in business. They are supposed to be rewritten to absolute URLs automatically now but it doesn't appear to be working.
I'm a bit confused about what you mean with "each index.html"? Your angular App as only one single index.html for the all app
Anyway I wrote that blog post a while ago, so it might be that the SSR workaround isn't valid anymore or maybe even not needed anymore. I developed that hack in that way as, back at that time, it was not possible to use fs in Angular 6 but according this post on Stackoverflow it is now possible. Therefore maybe that by allowing your app to use fs you will be able to fetch the markdown content on the server side
With regard to "each index.html" I meant the ones that are created by the prerender.ts script. That is, the way that Angular Universal has worked for me is that it creates separate index.html files for each prerendered url. For instance I have dist/browser/about/index.html -- and that file contains the html that would be seen by Google for instance.
But the index.html files that are made in this case simply have an empty div (with markdown="" ) where the pulled-in markdown content should be. So Google wouldn't actually see the content in question.
In any event, thank you for pointing me toward the fs option. I will look into that!
Oh cool super interesting, back then I wasn't able to get Prerendering up-and-running that's why I ended up using SSR. Really cool to hear it work out (if we omit the bug related to the blog).
I hope fs will solve the issue, would be interested to hear you voice once you solve the issue, keep me posted!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks for this guide, David!
So far I've mostly been able to follow it, but I'm getting hung up on the SSR hack.
index.html files are being created for all the appropriate routes (i.e., one for each corresponding .md file). And they are drawing from the appropriate component.
However, each index.html file only has
where the actual content from the .md file should be.Does anything come to mind as where to look for the problem? I'm new to Angular Universal and have exhausted everything I can think of.
I'm attempting something similar with Angular Universal and the pre-renderer in v9. I am having the same issue, with the
<markdown>element in the generated html file but no content.I thought it was related to HttpClient request for the markdown, so I had some scripts which will generate an
articles.tsfile at build time with all of the markdown, routes, etc. (it also generates my routes.txt file for prerendering). The markdown gets base64-encoded to put into the array. Then the component loads the data fromarticles.ts, converts it back to ASCII, and puts it in the[data]binding of the<markdown>element.Now HttpClient was removed from the equation and the content is all available in TypeScript when the pre-renderer runs, however the result is the same - an empty
<markdown>element in the rendered HTML.The odd thing is that I have a "blog" page that lists the articles with thumbnails, data that is also pulled from the same file. It doesn't use
ngx-markdownbut just creates some cards with normal elements and Angular bindings. That page gets successfully rendered, with the data from thearticles.tsfile statically in the HTML.I think it has something to do with the way
ngx-markdownworks, probably how it calls out tomarkedfor the parsing.Maybe something changed in
ngx-markdown? It has been a while since I wrote this blog post (> 2 years) maybe it also need some other adjustments...I stripped out
ngx-markdownand tried usingmarkeddirectly with the same result.I did have some success loading the markdown with HttpClient and using
marked. The prerender fails on the HTTP requests however if i usehttp://localhost:4300in the URLs and run another copy of the app while I'm prerendering, it can successfully find the markdown files and renders properly. If i can just figure out why the relative URL calls are failing, I'll be in business. They are supposed to be rewritten to absolute URLs automatically now but it doesn't appear to be working.Happy to hear you made progress. Can't help unfortunately, it's been a while since I don't used Angular for SSR. Good luck 🤞
I'm a bit confused about what you mean with "each index.html"? Your angular App as only one single index.html for the all app
Anyway I wrote that blog post a while ago, so it might be that the SSR workaround isn't valid anymore or maybe even not needed anymore. I developed that hack in that way as, back at that time, it was not possible to use
fsin Angular 6 but according this post on Stackoverflow it is now possible. Therefore maybe that by allowing your app to use fs you will be able to fetch the markdown content on the server sideThank you, David.
With regard to "each index.html" I meant the ones that are created by the prerender.ts script. That is, the way that Angular Universal has worked for me is that it creates separate index.html files for each prerendered url. For instance I have dist/browser/about/index.html -- and that file contains the html that would be seen by Google for instance.
But the index.html files that are made in this case simply have an empty div (with markdown="" ) where the pulled-in markdown content should be. So Google wouldn't actually see the content in question.
In any event, thank you for pointing me toward the fs option. I will look into that!
Oh cool super interesting, back then I wasn't able to get Prerendering up-and-running that's why I ended up using SSR. Really cool to hear it work out (if we omit the bug related to the blog).
I hope fs will solve the issue, would be interested to hear you voice once you solve the issue, keep me posted!