Error when using GroupDocs Viewer API

GroupDocs.Viewer Product Family
1

Hello,

I am facing an error when trying to load the GroupDocs viewer in my local program.
I am copying the file from github and paste it into my local program.

image.png (13.0 KB)

I think the problem is due to the incorrect setting of Resources/viewer and Client/node_modules.
I am copying these two folders from https://github.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET/tree/master/Demos/WebForms/src

May I know what is the correct way to install these in my local program?

Regards,
WK

2

@WeiKiatChua

I believe you can do it as you’ve described. Can you please share your local program so we could reproduce this issue at our end?

3

Dear vlaimir,

Attached is my local project.
I excluded the bin,client,licenses,packages and resources folder to reduce down the size of the attachment.GroupDocs-WebAPI.zip (924.8 KB)
client.PNG (23.2 KB)
licenses.PNG (3.1 KB)
resources.PNG (15.3 KB)

Regards,
WK

4

Dear Sir,

I try to remove the cline/node_module and install it via " npm install --legacy-peer-deps".
However, the issue still persist and I suspect it is because of the Resources/viewer that I copy from the demo program.
It should be install via npm instead of copy and paste but I am not sure how can I install it via npm.

Regards,
WK

5

@WeiKiatChua

The client Angular app can be created and built apart from ASP.NET Web Application. Let me show how to create a sample Angular application that is using Viewer component.

  • Create Angular app ng new viewer-app --minimal
  • Navigate to viewer-app folder with cd viewer-app
  • Install Viewer component package npm i @groupdocs.examples.angular/viewer
  • Update app.module.ts file to
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ViewerModule } from "@groupdocs.examples.angular/viewer";
import { ConfigService } from '@groupdocs.examples.angular/common-components';

export function configServiceFactory() {
  let config = new ConfigService();
  config.apiEndpoint = "http://localhost:8080"; //Set your api endpoint here
  return config;  
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ViewerModule],
  providers: [
    {
      provide: ConfigService,
      useFactory: configServiceFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
  • Update app.component.ts to

@Component({
  selector: 'app-root',
  template: `<gd-viewer></gd-viewer>`,
  styles: []
})
export class AppComponent {
  title = 'viewer-app';
}
  • You’ll also need the backend API self_host_api.zip that you can run with dotnet run
  • Run the app with ng serve and navigate to the http://localhost:4200/ in your browser

Now, you have the fully functional Angular app and you can build distribution scripts by running npm run build -- --prod --output-path .\dist. To make build pass without warnings update angular.json file

  • add the following lines to the options section
...
"allowedCommonJsDependencies": [
    "hammerjs", "jquery"
] 
...
  • (optional) do not add hash to the output by updating "outputHashing": "all" to "outputHashing": "none"

After you build the packages you’ll find your distribution files in the .\dist folder:

PS .\dist> dir

    Directory: .\dist

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----          1/4/2022  10:42 AM          22727 3rdpartylicenses.txt
-a----          1/4/2022  10:13 AM            948 favicon.ico
-a----          1/4/2022  10:42 AM            455 index.html
-a----          1/4/2022  10:42 AM        1299786 main.js
-a----          1/4/2022  10:42 AM          36846 polyfills.js
-a----          1/4/2022  10:42 AM           1485 runtime.js
-a----          1/4/2022  10:42 AM              0 styles.css

These files can be added to your app and used as static resources.

The complete sample app can be downloaded at viewer-app-simple.zip.

As a side note, probably you’ll need to install Node v14 to build and run the app successfully or use --legacy-peer-deps flag in case you’re using the latter version of Node.

Hope it helps.
Let us know if it worked for you.

6

Dear vladimir,

Thanks for the reply, I shall try it out.
Besides that, I compared my local project and the demo project from github.
I realized there are a few element didn’t run in my local project.
Can you please help me to check on it?
It this causing the API not running properly?network.PNG (21.1 KB)
sources.PNG (22.9 KB)

7

Moreover, I getting this message after run the npm fund.npm fund.PNG (4.3 KB)

8

@WeiKiatChua

I’ve managed to run the application you’ve attached, here is updated version of it web-api.zip (1.3 MB). After you run the app navigate to /view path and you should see the running app

What was changed:

  • ViewerApiController.cs routes has been updated
  • Angular App distribution files has been added resources\viewer\ folder
  • View.aspx has been updated to reference new files added to resources\viewer\ folder

Let us know if it works for you.

9

Dear vladimir,

Yes, my local project is working great now!
Thank you for your help.
The viewer looks good at our side and we shall work on the Editor now.

Regards,
WK

10

@WeiKiatChua

You’re welcome!

Let us know if you have any questions!

11

Dear vladimir,

May I know how can I update the reference in resources\viewer or \editor?

Regards,
WK

12

Dear vladimir,

Attached is my local projects ( added editor content ).
EditorDemoApp.zip (935.1 KB)

I am having error on the loadconfig and the GoogleAPI doesn’t load.

Regards,
WK

13

@WeiKiatChua

This issue has been moved to the Loadconfig and the GoogleAPI doesn’t load topic.

14

@WeiKiatChua

In case you need to update API endpoint you can do this either by:

  • searching for apiEndpoint= in the main.js file and updating the value there.
  • in the app.module.ts file see this comment for the complete example.
export function configServiceFactory() {
  let config = new ConfigService();
  config.apiEndpoint = "http://localhost:8080"; //Set your api endpoint here
  return config;  
}
15

Dear vladimir,

Sorry, I means how do I generate the file such as main.js, runtime.js and polyfills.js in the resources/viewer and resources/editor?

Regards,
WK

16

@WeiKiatChua

After you build Angular app you can generate distribution files. Please follow the steps in this comment to create and generate distribution files. After you execute npm run build -- --prod --output-path .\dist you’ll find main.js and other files in the dist folder.

17

Dear vladimir,

Thanks, I managed to build the main.js according to your comment.
Here is what I get.
building angular.PNG (13.8 KB)
resources_editor.PNG (19.0 KB)
edit_aspx.PNG (37.0 KB)

However, I still facing error when loading the edit.aspx page.
error when loading.PNG (41.2 KB)

Regards,
WK

18

It looks like the main reason is because fail to load the loadconfig.
loadconfig error 2.PNG (45.2 KB)

19

@WeiKiatChua

Please try adding [RoutePrefix("editor")] attribute to the EditorApiController class in the EditorApiController.cs file as following:

...
[RoutePrefix("editor")]
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class EditorApiController : ApiController
...

This change will add all editor prefixes to all the routes in this controller.

20

@WeiKiatChua

Can you please clarify if you’re building Editor app?