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

"AngularApp1.Server" project: Add references to the Vintasoft assemblies to ASP.NET Core Web application.

"AngularApp1.Server" project: Create web service for barcode generation.

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

  using Vintasoft.Barcode.AspNetCore.ApiControllers;
  
  namespace WebApplication1.Controllers
  {
      public class MyVintasoftBarcodeApiController : VintasoftBarcodeApiController
      {
  
          public MyVintasoftBarcodeApiController(IWebHostEnvironment hostingEnvironment)
              : base(hostingEnvironment)
          {
          }
  
      }
  }
  
  

"AngularApp1.Server" project: Specify that VintaSoft Barcode .NET SDK should use SkiaSharp library for drawing of 2D graphics.

// specify that VintaSoft Barcode .NET SDK should use SkiaSharp library for drawing of 2D graphics
Vintasoft.Barcode.SkiaSharpAssembly.Init();

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews().AddNewtonsoftJson();

var app = builder.Build();

app.UseDefaultFiles();
app.MapStaticAssets();

// Configure the HTTP request pipeline.

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.MapFallbackToFile("/index.html");

app.Run();

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

"angularapp1.client" project: 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 JavaScript-file "Vintasoft.Shared.js" from Github in "angularapp1.client" project.
  Copy TypeScript-file "Vintasoft.Shared.d.ts" from Github in "angularapp1.client" project.
  Copy JavaScript-file "Vintasoft.Barcode.js" from Github in "angularapp1.client" project.
  Copy TypeScript-file "Vintasoft.Barcode.d.ts" from Github in "angularapp1.client" project.
  
  
  
• Add references to Vintasoft JavaScript files to the "projects => angularapp1.client => architect => build => options => scripts" section in "angular.json" file in "angularapp1.client" project:
  • JSON

  ...
  "scripts": [
    "src/app/assets/Vintasoft.Shared.js",
    "src/app/assets/Vintasoft.Barcode.js"
  ]
  ...
  

  
  

"angularapp1.client" project: Create Angular component that recognizes barcodes in image.

• Open "src\app\app.component.html" file in "angularapp1.client" project, clear the file, add HTML markup (page header and image element that will display generated barcode image) to the "app.component.html" file:
  • HTML

  <h1>Angular Barcode Generator Demo</h1>
  
  <img id="barcodeImage" src="" />
  
  

  
  
  
  
• 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() {
      // generate image of QR barcode with value "12345"
      this.generate2dBarcodeImage("QR", "12345");
    }
  
    /**
     * Generates 1D barcode image.
     * @param barcodeType Barcode type.
     * @param barcodeValue Barcode value.
    */
    public generate1dBarcodeImage(barcodeType: string, barcodeValue: string) {
      // set the session identifier
      Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
  
      // create web service that allows to generate barcode
      let barcodeService: Vintasoft.Shared.WebServiceJS = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");
  
      // create the barcode writer
      let barcodeWriter: Vintasoft.Barcode.WebBarcodeWriterJS = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);
  
      // create the barcode writer settings for generating 2D barcode
      let barcodeWriterSettings: Vintasoft.Barcode.Web1DBarcodeWriterSettingsJS = new Vintasoft.Barcode.Web1DBarcodeWriterSettingsJS();
      // specify that barcode writer must generate QR barcode image
      barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS(barcodeType));
      // specify the QR barcode value
      barcodeWriterSettings.set_Value(barcodeValue);
  
      // specify settings for barcode writer
      barcodeWriter.set_Settings(barcodeWriterSettings);
  
      // send an asynchronous request for getting barcode image as Base64 string
      barcodeWriter.getBarcodeAsBase64Image(this.__writeBarcode_success, this.__writeBarcode_failed);
    }
  
    /**
     * Generates 2D barcode image.
     * @param barcodeType Barcode type.
     * @param barcodeValue Barcode value.
    */
    public generate2dBarcodeImage(barcodeType: string, barcodeValue: string) {
      // set the session identifier
      Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
  
      // create web service that allows to generate barcode
      let barcodeService: Vintasoft.Shared.WebServiceJS = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");
  
      // create the barcode writer
      let barcodeWriter: Vintasoft.Barcode.WebBarcodeWriterJS = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);
  
      // create the barcode writer settings for generating 2D barcode
      let barcodeWriterSettings: Vintasoft.Barcode.Web2DBarcodeWriterSettingsJS = new Vintasoft.Barcode.Web2DBarcodeWriterSettingsJS();
      // specify that barcode writer must generate QR barcode image
      barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS(barcodeType));
      // specify the QR barcode value
      barcodeWriterSettings.set_Value(barcodeValue);
  
      // specify settings for barcode writer
      barcodeWriter.set_Settings(barcodeWriterSettings);
  
      // send an asynchronous request for getting barcode image as Base64 string
      barcodeWriter.getBarcodeAsBase64Image(this.__writeBarcode_success, this.__writeBarcode_failed);
    }
  
    /**
     * Barcode is generated successfully.
     * @param data Object that stores response from barcode service.
     */
    private __writeBarcode_success(data: any) {
      if (data.success) {
        let barcodeImage: string = data.barcodeImage;
        let barcodeImageElement: HTMLImageElement = document.getElementById("barcodeImage") as HTMLImageElement;
        barcodeImageElement.src = barcodeImage;
      }
      else {
        alert(data.errorMessage);
      }
    }
  
    /**
     * Barcode generation is failed.
     * @param data Object with information about error.
     */
    private __writeBarcode_failed(data: any) {
      // show information about error
      alert(data.errorMessage);
    }
  
    title = 'angularapp1.client';
  }
  
  

  
  
  
  
• 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/MyVintasoftBarcodeApi/" 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 with ASP.NET Core" application and see the result.