To install this library, run:

Usage no npm install needed!

<script type="module">
  import snowboundVirtualviewerAlfresco from 'https://cdn.skypack.dev/@snowbound/virtualviewer-alfresco';


VirtualViewer for Alfresco ADF


To install this library, run:

$ npm install @snowbound/virtualviewer-alfresco --save

Consuming @snowbound/virtualviewer-alfresco

To use the VirtualViewerAlfrescoComponent you must import both VirtualViewerAlfrescoModule and the base VirtualViewerModule from @snowbound/virtualviewer. When importing you can also configure base VirtualViewer settings, such as the URL for this component to connect to VirtualViewer (which by default is http://localhost:8080/virtualviewer).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

//Import the base config object VirtualViewerConfig if you wish to change default configuration
import { VirtualViewerModule } from '@snowbound/virtualviewer-alfresco';
import { VirtualViewerAlfrescoModule } from '@snowbound/virtualviewer-alfresco';

  declarations: [
  imports: [

    //import VirtualViewer
    //VirtualViewerConfig can be provided as an optional parameter
        baseUrl: 'http://my-virtualviewer-url:8080'
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Add VirtualViewer extension for Content Application

Plugging VirtualViewer into the Alfresco Content Application requires two additional steps. First angular.json has to be modified to copy the extension JSON into place:

angular.json (minimal version to show where JSON should be added)

    "projects": {
        "app": {
            "architect": {
                "build": {
                    "options": {
                            //This entry copies the VirtualViewer extension JSON into the build's assets 
                                "glob": "**/*.json",
                                "input": "node_modules/@snowbound/virtualviewer-alfresco/assets",
                                "output": "./assets/plugins"    

Secondly, the VirtualViewer extension JSON has to be referenced in app.extensions.json:


    "$schema": "../../extension.schema.json",
    "$name": "app",
    "$version": "1.0.0",
    "$references": [

After these steps the Alfresco Viewer will now use VirtualViewer to open supported file formats.

Manually using VirtualViewerAlfrescoComponent

The VirtualViewerComponent selector is <snowbound-virtualviewer-alf> - this component will create a frame containing VirtualViewer. If you wish to also open a document, you can provide the nodeId, sharedLinkId or node:MinimalNodeEntryEntity inputs.

<snowbound-virtualviewer-alf [nodeId]="3cd8b34e-d5dd-4930-baf2-daecb2d43925"></snowbound-virtualviewer-alf>