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" nuget-package. Reference to the "SkiaSharp" nuget-package version 3.119.0 will be added automatically.
  
• 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" nuget-package.
  
• 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: Add reference to nuget-packages.

• Add reference to the "System.IO.Packaging" nuget-package version 10.0.0.

"AngularApp1.Server" project: Create web services, which allow to upload/download file and edit DOCX document.

• Add the "Controllers" folder to the project.

• 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 edit DOCX document

  • 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 "MyVintasoftOfficeApiController" and press the "Add" button
    
  • Specify that MyVintasoftOfficeApiController class is derived from Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController class
    
    Here are source codes of MyVintasoftOfficeApiController class:
    
    • C#

    namespace AngularApp1.Server.Controllers
    {
        public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
        {
            public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

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

• Create folder "wwwroot\UploadedImageFiles\SessionID" in "AngularApp1.Server" project and copy test DOCX file "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\TestFiles\DocxTestDocument.docx" to the folder. This file will be displayed in web document editor.

"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.
  
  
• Copy Vintasoft.Shared.js, Vintasoft.Shared.d.ts, Vintasoft.Imaging.js, Vintasoft.Imaging.d.ts, Vintasoft.Imaging.Office.js and Vintasoft.Imaging.Office.d.ts files from "<SdkInstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder to the "src\app\assets\" folder.
  
  
• Specify, which "standard" UI dialogs (rename worksheet dialog, find text dialog, etc) should be used by web document editor
  • If web document editor should use ready-to-use "standard" Bootstrap dialogs:
    • Add "bootstrap" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
      Here are source codes of "package.json" file after update:
      
      • JSON

      {
        "name": "angularapp1.client",
        "version": "0.0.0",
        "scripts": {
          "ng": "ng",
          "start": "run-script-os",
          "build": "ng build",
          "watch": "ng build --watch --configuration development",
          "test": "ng test",
          "prestart": "node aspnetcore-https",
          "start:windows": "ng serve --ssl --ssl-cert \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem\" --ssl-key \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key\" --host=127.0.0.1",
          "start:default": "ng serve --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\" --host=127.0.0.1"
        },
        "private": true,
        "dependencies": {
          "@angular/animations": "^16.2.0",
          "@angular/common": "^16.2.0",
          "@angular/compiler": "^16.2.0",
          "@angular/core": "^16.2.0",
          "@angular/forms": "^16.2.0",
          "@angular/platform-browser": "^16.2.0",
          "@angular/platform-browser-dynamic": "^16.2.0",
          "@angular/router": "^16.2.0",
          "bootstrap": "~5.3.8",
          "rxjs": "~7.8.0",
          "tslib": "^2.3.0",
          "zone.js": "~0.13.0",
          "jest-editor-support": "*",
          "run-script-os": "*"
        },
        "devDependencies": {
          "@angular-devkit/build-angular": "^16.2.0",
          "@angular/cli": "~16.2.0",
          "@angular/compiler-cli": "^16.2.0",
          "@types/jasmine": "~4.3.0",
          "jasmine-core": "~4.6.0",
          "karma": "~6.4.0",
          "karma-chrome-launcher": "~3.2.0",
          "karma-coverage": "~2.2.0",
          "karma-jasmine": "~5.1.0",
          "karma-jasmine-html-reporter": "~2.1.0",
          "typescript": "~5.1.3"
        }
      }
      
      

    • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js, Vintasoft.Imaging.Dialogs.Bootstrap.d.ts, Vintasoft.Imaging.Office.Dialogs.Bootstrap.js and Vintasoft.Imaging.Office.Dialogs.Bootstrap.d.ts files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web document editor should use ready-to-use "standard" jQuery UI dialogs:
    • Add "jquery-ui-dist" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js, Vintasoft.Imaging.Dialogs.jQueryUI.d.ts, Vintasoft.Imaging.Office.Dialogs.jQueryUI.js and Vintasoft.Imaging.Office.Dialogs.jQueryUI.d.ts files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web document editor should use custom "standard" dialogs (for example, Angular+Bootstrap dialogs), please read how to create custom "standard" dialogs here.
    
    
• 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": [
                "node_modules/bootstrap/dist/css/bootstrap.min.css",
                "src/Vintasoft.Imaging.css",
                "src/Vintasoft.Imaging.Office.css",
                "src/styles.css"
              ],
              "scripts": [
                "src/app/assets/Vintasoft.Shared.js",
                "src/app/assets/Vintasoft.Imaging.js",
                "src/app/assets/Vintasoft.Imaging.Dialogs.Bootstrap.js",
                "src/app/assets/Vintasoft.Imaging.Office.js",
                "src/app/assets/Vintasoft.Imaging.Office.Dialogs.Bootstrap.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"
            }
          }
        }
      }
    }
  }
  
  

  
  
• Copy files "Vintasoft.Imaging.css" and "Vintasoft.Imaging.Office.css" with CSS-styles of Vintasoft web document editor from "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Bin\JavaScript\" folder to the "src\" folder.
  Add information about Vintasoft.Imaging.css and Vintasoft.Imaging.Office.css files to the "styles" section of "app\angular.json" file.

"angularapp1.client" project: Create Angular-component that allows to display and edit DOCX document.

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

  <h1>VintaSoft Document Editor (Angular + ASP.NET Core)</h1>
  
  <div id="documentEditorContainer" class="documentEditorContainer"></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 in this demo
      Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftFileApi");
      Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftOfficeApi");
  
      // create web document editor settings
      let documentEditorSettings: Vintasoft.Imaging.Office.UI.WebDocumentEditorSettingsJS =
        new Vintasoft.Imaging.Office.UI.WebDocumentEditorSettingsJS("documentEditorContainer", "");
  
      // create web document editor
      let documentEditor: Vintasoft.Imaging.Office.UI.WebDocumentEditorJS =
        new Vintasoft.Imaging.Office.UI.WebDocumentEditorJS(documentEditorSettings);
  
      // open DOCX document
      documentEditor.openDocument("DocxTestDocument.docx");
    }
  
    title = 'angularapp1.client';
  }
  
  

  
  
  
  
• Open "src\app\app.component.css" file in "angularapp1.client" project, add CSS-style for "documentEditorContainer" 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;
  }
  
  .documentEditorContainer {
    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.