1022959: Updated Environment Integration for ssr ionic nx vite Environments#2669
1022959: Updated Environment Integration for ssr ionic nx vite Environments#2669SF4524LogeshKumar wants to merge 5 commits intodevelopmentfrom
Conversation
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INQUEUE 🕒 |
|
The running CI Job is terminated due to changes committed on the source branch for this Merge Request and CI triggered for latest commit. |
|
CI Status: ABORTED ❌ |
|
Build Status: INQUEUE 🕒 |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
| import { Component, PLATFORM_ID, Inject, OnInit, NO_ERRORS_SCHEMA } from '@angular/core'; | ||
| import { isPlatformBrowser, CommonModule } from '@angular/common'; | ||
| import { | ||
| PdfViewerModule, |
There was a problem hiding this comment.
Can we make it three lines
| styles: [` | ||
| .pdf-viewer-container { | ||
| padding: 20px; | ||
| background: #f5f5f5; | ||
| border-radius: 8px; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .viewer-wrapper { | ||
| height: 650px; | ||
| border: 1px solid #ddd; | ||
| border-radius: 4px; | ||
| background: white; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .ssr-placeholder { | ||
| height: 200px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background: white; | ||
| border: 1px solid #ddd; | ||
| border-radius: 4px; | ||
| color: #999; |
There was a problem hiding this comment.
Do we need these style related code.
| } | ||
|
|
||
| .no-documents { | ||
| display: flex; |
There was a problem hiding this comment.
why these much CSS code?
|
|
||
| This guide explains how to create an Angular application powered by the Vite build system and integrate the Syncfusion Angular PDF Viewer using standalone components. | ||
|
|
||
| From Angular 17 onwards, the Angular CLI uses a Vite-based application builder by default for local development. This improves startup time, rebuild performance, and developer experience. The Syncfusion Angular PDF Viewer works seamlessly with this modern setup when integrated correctly. |
There was a problem hiding this comment.
we can remove this content.
| Verify installations: | ||
|
|
||
| ```bash | ||
| node --version | ||
| npm --version | ||
| ng version |
There was a problem hiding this comment.
Remove verification commands
|
|
||
| These imports ensure the PDF Viewer toolbar, buttons, menus, and all UI elements are properly styled using Syncfusion's Material Design theme. | ||
|
|
||
| ## Create a PDF Service |
There was a problem hiding this comment.
This is application architecture, not PDF Viewer integration
There was a problem hiding this comment.
remove this section
| **Component Features:** | ||
| - Standalone component (no NgModule required) | ||
| - All 13 Syncfusion services registered as providers | ||
| - Dynamic resource URL calculation for runtime asset resolution | ||
| - RxJS subscriptions to service observables | ||
| - Proper event handling for load success/failure | ||
| - TypeScript strict mode compatible |
There was a problem hiding this comment.
Remove feature bullets
| {% endhighlight %} | ||
| {% endtabs %} | ||
|
|
||
| ## Add Sample PDF Documents (Optional) |
There was a problem hiding this comment.
Remove this section
|
|
||
| # Syncfusion Angular PDF Viewer in Angular Universal (SSR) | ||
|
|
||
| This guide shows how to create an Angular Universal SSR application and integrate the Syncfusion Angular PDF Viewer component. |
There was a problem hiding this comment.
Replace conceptually with:
“This guide explains how to integrate the Syncfusion Angular PDF Viewer into an existing Angular Universal (SSR) application.”
|
|
||
| ## Step 1: Create Angular SSR Project | ||
|
|
||
| Create a new Angular application with Server-Side Rendering: |
There was a problem hiding this comment.
Angular Universal setup belongs to Angular docs
3 participants
Description:
Updated Environment Integration for Syncfusion Angular PDF Viewer