# Landing page not rendered | Angular 19, NX + Builder.io

**URL:** <https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601>\
**Category:** Technical Questions\
**Tags:** angular\
**Created:** [August 13, 2025, 1:27pm UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601 "2025-08-13T13:27:02Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![LaviniaGavrilescu21](https://avatars.discourse-cdn.com/v4/letter/l/ba9def/32.png) [@LaviniaGavrilescu21](https://forum.builder.io/u/LaviniaGavrilescu21)\
**Post date:** [August 13, 2025, 1:27pm UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/1 "2025-08-13T13:27:03Z")

</div>

I am using **Angular 19** and **NX** , I am trying to integrate a _ **landing page** _ for my app using [Builder.io](http://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 l **anding page** is _not being rendered_ on **localhost:4200** , but I can see the page on the [Builder.io](http://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 l_ocalhost:4200_ and I also **cannot see** the content in the _Content section_ from the [Builder.io](http://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”

>

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 13, 2025, 4:14pm UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/2 "2025-08-13T16:14:48Z")

</div>

Hello @LaviniaGavrilescu21

Welcome to the [builder.io](http://builder.io) forum post.

It looks like there are two separate issues here — one with dependency conflicts during `npm install` and another with the landing page not rendering in Angular 19.

**1. Why `npm install` is failing**

The error is caused by importing **Gen 1** [Builder.io](http://Builder.io) Angular SDK (`@builder.io/angular`), which has a peer dependency on `zone.js@0.14.x`. Angular 19 uses `zone.js@0.15.x`, so npm sees this mismatch and refuses to install.

You currently have:

```auto
import { BuilderModule } from '@builder.io/angular'; // Gen 1

```

That’s pulling in the old SDK, which you don’t need for Angular 19.

* * *

**2. Why the landing page isn’t rendering**

In [Builder.io](http://Builder.io) **Gen 2** (`@builder.io/sdk-angular`), the `<builder-component>` tag from Gen 1 is replaced by `<builder-content>`.  
If you keep using `<builder-component>` with only the Gen 2 SDK, nothing will render because the tag isn’t registered.

**3. Correct approach for Angular 19 + Gen 2 SDK**

1. **Remove** the Gen 1 package:

2. Use the Gen 2 Angular API and component:

**Component**

```auto
import { Component, Input } from "@angular/core";
import {
  fetchOneEntry,
  type BuilderContent,
  isPreviewing,
} from "@builder.io/sdk-angular";
import { Content } from "@builder.io/sdk-angular";
import { CommonModule } from "@angular/common";
import { environment } from "../../environments/environment";
import { CUSTOM_COMPONENTS } from "../builder-registry";

@Component({
  selector: "app-builder-page",
  standalone: true,
  imports: [Content, CommonModule],
  template: `
    <ng-container *ngIf="content || isPreviewing; else notFound">
      <builder-content
        [model]="model"
        [content]="content"
        [apiKey]="apiKey"
        [locale]="locale"
        [customComponents]="customComponents"
      ></builder-content>
    </ng-container>

    <ng-template #notFound>
      <div>404 - Content not found</div>
    </ng-template>
  `,
})
export class BuilderPage {
  isPreviewing = isPreviewing();

  @Input() model = "page";

  apiKey = environment.builderApiKey;

  content: BuilderContent | null = null;

  customComponents = CUSTOM_COMPONENTS;

  async ngOnInit() {
    const urlPath = window.location.pathname || "/";

    const builderContent = await fetchOneEntry({
      model: this.model,
      apiKey: this.apiKey,
      userAttributes: {
        urlPath,
      },
    });

    if (!builderContent) {
      return;
    }

    this.content = builderContent;
  }
}

```

**Template**

```auto
<builder-content
  [model]="model"
  [content]="isPreviewing ? null : content"
  [apiKey]="apiKey">
</builder-content>

```

* * *

With this setup, you’ll avoid the `zone.js` peer dependency issue and your [Builder.io](http://Builder.io) page should render correctly in Angular 19.

> **[GitHub - Manish-Builder-io/Angular-19-Builder-Starter-](https://github.com/Manish-Builder-io/Angular-19-Builder-Starter-)**
>
> Contribute to Manish-Builder-io/Angular-19-Builder-Starter- development by creating an account on GitHub.

Thanks,

---

<div class="post-metadata">

**Author:** ![LaviniaGavrilescu21](https://avatars.discourse-cdn.com/v4/letter/l/ba9def/32.png) [@LaviniaGavrilescu21](https://forum.builder.io/u/LaviniaGavrilescu21)\
**Post date:** [August 18, 2025, 8:43am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/3 "2025-08-18T08:43:35Z")

</div>

> [@manish-sharma](#):
>
> `BuilderContentComponent`

I did all the steps from your answer and I _do not get_ the **zone.js error** anymore when I run `npm install`, but _ **I get another error** _.

This new error is related to the import of `BuilderContentComponent`:

```typescript
import { fetchOneEntry, type BuilderContent, isPreviewing, BuilderContentComponent } from '@builder.io/sdk-angular';

```

The **error** is: **`TS2305: Module ‘@builder.io/sdk-angular’ has no exported member BuilderContentComponent`**.

My current implementation:

**Typescript**

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { fetchOneEntry, type BuilderContent, isPreviewing, BuilderContentComponent } from '@builder.io/sdk-angular';

@Component({
  selector: 'lib-cms-page',
  standalone: true,
  imports: [CommonModule, BuilderContentComponent],
  templateUrl: './cms-page.component.html',
  styleUrl: './cms-page.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class CmsPageComponent implements OnInit {
  readonly apiKey = 'YOUR_API_KEY';
  readonly model = 'page';
  content: BuilderContent | null = null;
  isPreviewing = isPreviewing();
  
async ngOnInit() {
    const urlPath = '/cms';
    this.content = await fetchOneEntry({
      model: this.model,
      apiKey: this.apiKey,
      userAttributes: { urlPath },
    });
  }
}

```

**HTML** :

```auto
<builder-content
  [model]="model"
  [content]="isPreviewing ? null : content"
  [apiKey]="apiKey">
</builder-content>

```

**package-lock.json** version for **GEN2** : **`“@builder.io/sdk-angular”: “^0.22.1”`.**

Do you also have any suggestions for this kind of problem?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 18, 2025, 9:02am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/4 "2025-08-18T09:02:42Z")

</div>

Hello @LaviniaGavrilescu21,

Yes, that’s correct — instead of `BuilderContentComponent`, you should use `Content`, i.e.:  
`import { Content } from "@builder.io/sdk-angular";`

Here’s your updated example code:

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { fetchOneEntry, type BuilderContent, isPreviewing, Content } from '@builder.io/sdk-angular';

@Component({
  selector: 'lib-cms-page',
  standalone: true,
  imports: [CommonModule, Content],
  templateUrl: './cms-page.component.html',
  styleUrl: './cms-page.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class CmsPageComponent implements OnInit {
  readonly apiKey = 'YOUR_API_KEY';
  readonly model = 'page';
  content: BuilderContent | null = null;
  isPreviewing = isPreviewing();
  
async ngOnInit() {
    const urlPath = '/cms';
    this.content = await fetchOneEntry({
      model: this.model,
      apiKey: this.apiKey,
      userAttributes: { urlPath },
    });
  }
}

```

---

<div class="post-metadata">

**Author:** ![LaviniaGavrilescu21](https://avatars.discourse-cdn.com/v4/letter/l/ba9def/32.png) [@LaviniaGavrilescu21](https://forum.builder.io/u/LaviniaGavrilescu21)\
**Post date:** [August 18, 2025, 10:03am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/5 "2025-08-18T10:03:54Z")

</div>

I _tried it_ and I get the following **error** : `Class ContentVariants cannot be imported (neither an Angular module nor a standalone declarable)`.

**Typescript** :

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { fetchOneEntry, type BuilderContent, isPreviewing, Content } from '@builder.io/sdk-angular'; // No error here

@Component({
  selector: 'lib-cms-page',
  standalone: true,
  imports: [CommonModule, Content], // The error is generated from using 'Content' here
  templateUrl: './cms-page.component.html',
  styleUrl: './cms-page.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class CmsPageComponent implements OnInit {
  readonly apiKey = 'YOUR_API_KEY';
  readonly model = 'page';
  content: BuilderContent | null = null;
  isPreviewing = isPreviewing();

  async ngOnInit() {
    const urlPath = '/cms';
    this.content = await fetchOneEntry({
      model: this.model,
      apiKey: this.apiKey,
      userAttributes: { urlPath },
    });
  }
}

```

I consulted this page of _documentation_: [https://www.builder.io/c/docs/content-component](https://www.builder.io/c/docs/content-component) and none of the solutions presented there worked for me.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 18, 2025, 11:34am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/6 "2025-08-18T11:34:34Z")

</div>

Hello @LaviniaGavrilescu21

You can refer to the following GitHub repository for guidance: [GitHub - Manish-Builder-io/Angular-19-Builder-Starter-](https://github.com/Manish-Builder-io/Angular-19-Builder-Starter-)

If this repository does not help resolve the issue, please feel free to share a reproducible repo, and we’ll be happy to assist you further.

Thank you,

---

<div class="post-metadata">

**Author:** ![LaviniaGavrilescu21](https://avatars.discourse-cdn.com/v4/letter/l/ba9def/32.png) [@LaviniaGavrilescu21](https://forum.builder.io/u/LaviniaGavrilescu21)\
**Post date:** [August 21, 2025, 7:43am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/7 "2025-08-21T07:43:45Z")

</div>

I uninstalled the previous versions of `builder.io` libraries that I used and used _the exact ones from your repo_ ([https://github.com/Manish-Builder-io/Angular-19-Builder-Starter-/blob/main/package.json](https://github.com/Manish-Builder-io/Angular-19-Builder-Starter-/blob/main/package.json)):

```json
"@builder.io/dev-tools": "^1.5.9",
"@builder.io/sdk-angular": "^0.18.2"

```

I still get an **error** from the usage of `Content` as an import:

```typescript
import { fetchOneEntry, type BuilderContent, isPreviewing, Content } from '@builder.io/sdk-angular';
@Component({
  selector: 'lib-cms-page',
  standalone: true,
  imports: [CommonModule, Content], // Class ContentVariants cannot be imported (neither an Angular module nor a standalone declarable)
  templateUrl: './cms-page.component.html',
  styleUrl: './cms-page.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

```

The _error_ is: **Class ContentVariants cannot be imported (neither an Angular module nor a standalone declarable)**.

I also deleted the `node_modules` package and run `npm install` again.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 21, 2025, 8:01am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/8 "2025-08-21T08:01:07Z")

</div>

Hello @LaviniaGavrilescu21

Are you able to share access to your repo?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 22, 2025, 9:56am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/9 "2025-08-22T09:56:27Z")

</div>

Hello @LaviniaGavrilescu21

Were you able to resolve the issue?

If not, kindly share your complete Builder integration code or a minimal reproducible repo, and we’ll be happy to assist you in resolving the errors.

Thanks,

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 25, 2025, 9:52am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/10 "2025-08-25T09:52:06Z")

</div>

Hello @LaviniaGavrilescu21

Hi Lavinia​,

The Angular SDK **does not export `BuilderContentComponent`**. That’s why you’re getting the `TS2305` error. Instead, it exports a **standalone Angular component** called `Content` which wraps the `<builder-content>` web component.

Could you update your **`cms-page.component.ts`** code below and see if that helps resolve the issue.

```auto
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { fetchOneEntry, type BuilderContent, isPreviewing, Content } from '@builder.io/sdk-angular';

@Component({
  selector: 'lib-cms-page',
  standalone: true,
  imports: [
    CommonModule,
    Content // ✅ Correct — use Content, not BuilderContentComponent
  ],
  templateUrl: './cms-page.component.html',
  styleUrls: ['./cms-page.component.scss'], // ✅ must be `styleUrls` (plural)
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class CmsPageComponent implements OnInit {
  readonly apiKey = 'YOUR_API_KEY';
  readonly model = 'page';
  content: BuilderContent | null = null;
  isPreviewing = isPreviewing();

  async ngOnInit() {
    const urlPath = '/cms';
    this.content = await fetchOneEntry({
      model: this.model,
      apiKey: this.apiKey,
      userAttributes: { urlPath },
    });
  }
}

```

Let us know if above doesn’t help resolve the issue.

Thank you,

---

<div class="post-metadata">

**Author:** ![LaviniaGavrilescu21](https://avatars.discourse-cdn.com/v4/letter/l/ba9def/32.png) [@LaviniaGavrilescu21](https://forum.builder.io/u/LaviniaGavrilescu21)\
**Post date:** [August 26, 2025, 6:59am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/11 "2025-08-26T06:59:58Z")

</div>

I took the exact code snippet, and I get an error regarding the **import** of `Content`:

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { fetchOneEntry, type BuilderContent, isPreviewing, Content } from '@builder.io/sdk-angular';

@Component({
  selector: 'lib-cms-page',
  standalone: true,
  imports: [
    CommonModule,
    Content // Error: Class ContentVariants cannot be imported (neither an Angular module nor a standalone declarable)
  ],
  templateUrl: './cms-page.component.html',
  styleUrls: ['./cms-page.component.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class CmsPageComponent implements OnInit {
  readonly apiKey = 'YOUR_API_KEY';
  readonly model = 'page';
  content: BuilderContent | null = null;
  isPreviewing = isPreviewing();
  async ngOnInit() {
    const urlPath = '/cms';
    this.content = await fetchOneEntry({
      model: this.model,
      apiKey: this.apiKey,
      userAttributes: { urlPath },
    });
  }
}

```

**Error: Class ContentVariants cannot be imported (neither an Angular module nor a standalone declarable**)

HTML:

```auto
<Content
  [attr.model]="model"
  [attr.api-key]="apiKey">
</Content>

```

Version: **“@builder.io/sdk-angular”: “^0.22.1”**

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 26, 2025, 9:45am UTC](https://forum.builder.io/t/landing-page-not-rendered-angular-19-nx-builder-io/15601/12 "2025-08-26T09:45:12Z")

</div>

@LaviniaGavrilescu21 We have tried to reproduce the issue on our end but have not been able to replicate it.

To help us investigate further, could you please share either:

- A screen recording demonstrating the issue, or

- A GitHub repository or CodeSandbox example where the issue can be reproduced.

This will give us the context we need to better understand the problem and provide more targeted assistance.

Looking forward to your response.

Best regards

 ![Screenshot 2025-08-26 at 3.13.26 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/35d0accbd68c35800b7b35812bc131310eb1fa8e.jpeg)