hello!
my app is using @angular/ssr, so i needed to set express_request from the server to make it work. the problem is that only loads on the first load. when i navigate to other url’s and go back to the landing page url the component load as undefined. i need to restart the server to make it work again but only works on the first load.
Builder content link
Builder public api key
eb7a8f96dc7d4d8c9d0841e89b2ecbd8
What are you trying to accomplish
I want to load landing pages created on builder.io into my angular app.
Screenshots or video link
Code stack you are integrating Builder with
"@angular/core": "^17.3.8",
"@angular/elements": "^17.3.8",
"@angular/ssr": "17.3.7",
"@builder.io/angular": "^3.0.1"
Reproducible code example
//server.ts
import { EXPRESS_REQUEST, EXPRESS_RESPONSE } from '@builder.io/angular';
(...)
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: distFolder,
providers: [
{ provide: APP_BASE_HREF, useValue: baseUrl },
{ provide: EXPRESS_RESPONSE, useValue: res },
{ provide: EXPRESS_REQUEST, useValue: req }
]
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
// brands.component.html
<builder-component
model="page"
[prerender]="!isBrowser()"
(load)="componentLoaded($event)"
(error)="componentError($event)"
>
</builder-component>
} @else {
<ui-loading-container></ui-loading-container>
}
// brands.component.html
export class BrandsComponent {
loading = signal(true);
noBuilderPageForUrl = signal(false);
seoService = inject(SeoService);
isBrowser = signal(false);
loaded = signal(false);
constructor(@Inject(PLATFORM_ID) platformId: string) {
this.isBrowser.set(isPlatformBrowser(platformId));
}
componentLoaded(comp: any) {
console.log('Component loaded', comp);
this.loading.set(false);
if (comp) {
this.loaded.set(true);
if (comp.data.title && comp.data.description) {
this.seoService.setSeoTags(comp.data.title, comp.data.description);
}
} else {
this.noBuilderPageForUrl.set(true);
}
}
componentError(err: any) {
console.error('Component error', err);
this.loading.set(false);
console.error('Component error', err);
this.noBuilderPageForUrl.set(true);
}
}
.