I have implemented an SSG app in Angular.
The github repository is located here and the running app can be viewed here.
The issue I am facing is that when I navigate buttons or links, the app seems to try and fetch data from the api server and fails because the api is not running. And the data is not shown on the page. However when I reload the page forcibly, the data appears on the page.
I believed that the whole point of SSG was to build static pages from angular pages and api data…
Can someone please explain why my SSG angular app behaving like that?
FYI, here is one of the generated static pages:
<!DOCTYPE html>
<html lang="en" data-critters-container>
<head>
<meta charset="utf-8">
<title>StaticSiteGenerationDemoNg</title>
<base href="/">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="styles-5INURTSO.css">
</head>
<body><!--nghm-->
<app-root _nghost-ng-c582792440 ng-version="18.2.5" ngh="1" ng-server-context="ssg"><h1 _ngcontent-ng-c582792440>Static
Site Generation demo in Angular</h1>
<router-outlet _ngcontent-ng-c582792440></router-outlet>
<app-product _nghost-ng-c1571746829 ngh="0"><a _ngcontent-ng-c1571746829 routerlink="../" href="/products">back to
products</a>
<p _ngcontent-ng-c1571746829>Chosen product</p>
<article _ngcontent-ng-c1571746829><h3 _ngcontent-ng-c1571746829>Silver plates set</h3>
<p _ngcontent-ng-c1571746829>Beautiful set of silver plates</p></article><!----></app-product><!----></app-root>
<script src="polyfills-FFHMD2TL.js" type="module"></script>
<script src="main-FCUK6P6Q.js" type="module"></script>
<script id="ng-state"
type="application/json">{"2954370893":{"b": {"id": 1, "name":"Silver plates set", "description": "Beautiful set of silver plates"}, "h": {}, "s": 200, "st": "OK","u": "http://localhost:3000/products/1", "rt": "json"}, "__nghData__":[{"n": {"6": "hfn2"}, "t": {"6": "t0"}, "c": {"6":[{"i": "t0", "r": 1}]}}, {"c": {"2":[{"i": "c1571746829", "r": 1}]}}]}</script>
</body>
</html>
Here is the corresponding angular template:
<a routerLink="../">back to products</a>
<p>Chosen product</p>
@let product = product$ | async ;
@if (product) {
<article>
<h3>{{ product.name }}</h3>
<p>{{ product.description }}</p>
</article>
}
Edit 1: It occurred to me that the issue might be due to the fact that the page tries to fetch data after the first load and since the backend is not running, the page is updated with no data. Is this behavior to be expected: i.e. static page load followed by a http data fetch?
1