I am using Angular 19 and NX, I am trying to integrate a landing page for my app using Builder.io.
Used versions:
“@builder.io/sdk”: “^6.1.2” // GEN 1
“@builder.io*/sdk-angular”: “^0.22.1”* // GEN 2 - I want to use this one with Angular 19
I get no errors on ng serve, but the landing page is not being rendered on localhost:4200, but I can see the page on the Builder.io website, on the Content section where I defined the page.
When I run npm install I get the following errors:
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @builder.io/angular@5.0.2
npm error Found: zone.js@0.15.1
npm error node_modules/zone.js
npm error zone.js@“~0.15.0” from the root project
npm error peer zone.js@“~0.15.0” from @angular/core@19.1.7
npm error node_modules/@angular/core
npm error @angular/core@“19.1.7” from the root project
npm error peer @angular/core@“19.1.7” from @angular/animations@19.1.7
npm error node_modules/@angular/animations
npm error @angular/animations@“19.1.7” from the root project
npm error 2 more (@angular/platform-browser, @storybook/angular)
npm error 22 more (@angular/cdk, @angular/common, @angular/compiler, …)
npm error 2 more (@storybook/angular, ngx-markdown)
npm error
npm error Could not resolve dependency:
npm error peer zone.js@“0.14.x” from @builder.io/angular@5.0.2
npm error node_modules/@builder.io/angular
npm error @builder.io/angular@“^5.0.2” from the root project
npm error
npm error Conflicting peer dependency: zone.js@0.14.10
npm error node_modules/zone.js
npm error peer zone.js@“0.14.x” from @builder.io/angular@5.0.2
npm error node_modules/@builder.io/angular
npm error @builder.io/angular@“^5.0.2” from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /root/.npm/_logs/2025-08-13T13_11_47_118Z-eresolve-report.txt
npm error A complete log of this run can be found in: /root/.npm/_logs/2025-08-13T13_11_47_118Z-debug-0.log
But if I remove the BuilderModule from my imports, then the landing page is not rendered on localhost:4200 and I also cannot see the content in the Content section from the Builder.io website.
I also tried using
<Content
model="page"
apiKey=YOUR_API_KEY
content={contentJson}
/>
but it did not work. If I added Content to the imports, I get this error: `Class ContentVariants cannot be imported (neither an Angular module nor a standalone declarable)
Does anybody have any suggestions for this problem?
Here is the current implementation:
Typescript file:
import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { fetchOneEntry, type BuilderContent, isPreviewing } from ‘@builder.io/sdk-angular’; // GEN 2
import { BuilderModule } from ‘@builder.io/angular’; // GEN 1
@Component({
selector: ‘lib-cms-page’,
standalone: true,
imports: [CommonModule, BuilderModule],
templateUrl: ‘./cms-page.component.html’,
styleUrl: ‘./cms-page.component.scss’,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class CmsPageComponent implements OnInit {
// Working
readonly apiKey = ‘my-api-key’;
readonly model = ‘page’;
content: BuilderContent | null = null;
isPreviewing = isPreviewing();
async ngOnInit() {
const urlPath = ‘/cms’;
const builderContent = await fetchOneEntry({
model: this.model,
apiKey: this.apiKey,
userAttributes: { urlPath },
});
console.log(‘[``Builder.io``] Fetched content:’, builderContent); // The content is fetched
if (builderContent) {
this.content = builderContent;
}
}
}
HTML file:
<builder-component
[model]=“model”
[content]=“isPreviewing ? null : content”
