Create a blank "Angular and ASP.NET Core" application.

"AngularApp1.Server" project: Add references to the Vintasoft nuget-packages to "AngularApp1.Server" project.

"AngularApp1.Server" project: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

• Add reference to the Vintasoft.Imaging.Drawing.SkiaSharp.dll assembly.
  
• Add reference to the "SkiaSharp" nuget-package version 3.119.0.
• Open "Program.cs" file in "AngularApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

• Add reference to the Vintasoft.Imaging.Gdi.dll assembly.
  
• Open "Program.cs" file in "AngularApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

"AngularApp1.Server" project: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails and render image tiles.

• Create web service that allows to upload/download file

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
    
  • Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class
    
    Here are source codes of MyVintasoftFileApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
        {
    
            public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to manage image collection

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftImageCollectionApiController" and press the "Add" button
    
  • Specify that MyVintasoftImageCollectionApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController class
    
    Here are source codes of MyVintasoftImageCollectionApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController
        {
    
            public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

• Create web service that allows to get information about images, get thumbnails and render image tiles

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftImageApiController" and press the "Add" button
    
  • Specify that MyVintasoftImageApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController class
    
    Here are source codes of MyVintasoftImageApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
        {
    
            public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    
    

"AngularApp1.Server" project: Copy the default test PDF document to a server side.

• Create folder "wwwroot\UploadedImageFiles\SessionID" in "AngularApp1.Server" project and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\VintasoftImagingDemo.pdf" to the folder. This file will be displayed in web document viewer.

"AngularApp1.Server" project: Delete files, which are not necessary in this tutorial.

Compile the solution for restoring TypeScript-dependencies in "angularapp1.client" project.

"angularapp1.client" project: Add JavaScript files and TypeScript modules to the "angularapp1.client" project.

• Add the "assets" folder to the "src\app\" folder in "angularapp1.client" project.
  
  
• Copy Vintasoft.Shared.js, Vintasoft.Shared.d.ts, Vintasoft.Imaging.js and Vintasoft.Imaging.d.ts files from "<SdkInstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder to the "src\app\assets\" folder.
  
  
• Add references to used JavaScript libraries to the "projects => angularapp1.client => architect => build => options => scripts" section in "angular.json" file, add references to used CSS-files to the "projects => Demo => architect => build => options => styles" section in "angular.json" file.
  Here are source codes of "angular.json" file:
  
  • JSON

  {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "angularapp1.client": {
        "projectType": "application",
        "schematics": {},
        "root": "",
        "sourceRoot": "src",
        "prefix": "app",
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/angularapp1.client",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": [
                "zone.js"
              ],
              "tsConfig": "tsconfig.app.json",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.css"
              ],
              "scripts": [
                "src/app/assets/Vintasoft.Shared.js",
                "src/app/assets/Vintasoft.Imaging.js"
              ]
            },
            "configurations": {
              "production": {
                "budgets": [
                  {
                    "type": "initial",
                    "maximumWarning": "500kb",
                    "maximumError": "1mb"
                  },
                  {
                    "type": "anyComponentStyle",
                    "maximumWarning": "2kb",
                    "maximumError": "4kb"
                  }
                ],
                "outputHashing": "all"
              },
              "development": {
                "buildOptimizer": false,
                "optimization": false,
                "vendorChunk": true,
                "extractLicenses": false,
                "sourceMap": true,
                "namedChunks": true
              }
            },
            "defaultConfiguration": "production"
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "configurations": {
              "production": {
                "browserTarget": "angularapp1.client:build:production"
              },
              "development": {
                "browserTarget": "angularapp1.client:build:development"
              }
            },
            "defaultConfiguration": "development",
            "options": {
              "proxyConfig": "src/proxy.conf.js",
              "port": 65185
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "angularapp1.client:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "polyfills": [
                "zone.js",
                "zone.js/testing"
              ],
              "tsConfig": "tsconfig.spec.json",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.css"
              ],
              "scripts": [],
              "karmaConfig": "karma.conf.js"
            }
          }
        }
      }
    }
  }
  
  

  
  

"angularapp1.client" project: Create Angular-component that displays image viewer.

• Open "src\app\app.component.html" file in "angularapp1.client" project, clear the file, add HTML markup (page header and DIV-element for web image viewer) to the "app.component.html" file:
  • HTML

  <h1>VintaSoft Image Viewer Demo (Angular + ASP.NET Core)</h1>
  
  <div class="imageViewerDemoContainer">
    <div id="WebThumbnailViewer1Div" class="thumbnailViewerContainer"></div>
    <div id="WebImageViewer1Div" class="imageViewerContainer"></div>
  </div>
  
  

  
  
  
  
• Open "src\app\app.component.ts" file in "angularapp1.client" project, clear the file, add TypeScript code to the "app.component.ts" file:
  • TYPESCRIPT

  import { HttpClient } from '@angular/common/http';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    constructor(private http: HttpClient) {}
  
    ngOnInit() {
      // set the session identifier
      Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
  
      // specify web services, which should be used by Vintasoft Web Document Viewer
      Vintasoft.Shared.WebServiceJS.defaultFileService =
        new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftFileApi");
      Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
        new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftImageCollectionApi");
      Vintasoft.Shared.WebServiceJS.defaultImageService =
        new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftImageApi");
  
      // create thumbnail viewer
      let thumbnailViewer: Vintasoft.Imaging.UI.WebThumbnailViewerJS =
        new Vintasoft.Imaging.UI.WebThumbnailViewerJS("WebThumbnailViewer1Div");
      // specify that thumbnail viewer should not cache thumbnails on server side
      thumbnailViewer.set_UseCache(false);
  
      // create image viewer
      let imageViewer: Vintasoft.Imaging.UI.WebImageViewerJS =
        new Vintasoft.Imaging.UI.WebImageViewerJS("WebImageViewer1Div");
      // specify that image viewer should not cache image tiles on server side
      imageViewer.set_UseCache(false);
  
      // specify that image viewer depends from thumbnail viewer
      imageViewer.set_MasterViewer(thumbnailViewer);
  
      // open file from session folder and add images from file to the image viewer
      imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
    }
  
    title = 'angularapp1.client';
  }
  
  

  
  
  
  
• Open "src\app\app.component.css" file in "angularapp1.client" project, add CSS-styles for viewers to the "app.component.ts" file:
  • HTML

  :host {
      max-width: 1280px;
      padding: 2rem;
      text-align: center;
  }
  
  th, td {
      padding-left: 1rem;
      padding-right: 1rem;
  }
  
  table {
      margin: 0 auto;
  }
  
  .imageViewerDemoContainer {
    display: flex;
  }
  
  .thumbnailViewerContainer {
    width: 200px;
    height: 800px;
  }
  
  .imageViewerContainer {
    width: 1200px;
    height: 800px;
  }
  
  

  
  
  
• Delete file "src\app\app.component.spec.ts" in "angularapp1.client" project - file is not necessary.
  
  
• Open "src\proxy.conf.js" file in "angularapp1.client" project and specify that Angular aplication can have access to the ASP.NET Core Web API controller "/vintasoft/api/" in "AngularApp1.Server" project:
  • JavaScript

  const { env } = require('process');
  
  const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7200';
  
  const PROXY_CONFIG = [
    {
      context: [
        "/vintasoft/api/"
      ],
      target,
      secure: false
    }
  ]
  
  module.exports = PROXY_CONFIG;
  
  

  
  

Run the "Angular and ASP.NET Core" application and see the result.