Step 1: Open Visual Studio;

 

Step 2: Click File menu, select New item, and choose Project item;

 

Step 3: Select ASP.NET Core Web Application command;

 

Step 4: Click Next button;

 

Step 5: Specify the name of this project, location and solution name. For example, AngularViewer;

 

Step 6: Click Create button;

 

Step 7: Select Angular type, set .NET Core as a framework and select ASP.NET Core 3.1 and higher version;

 

Step 8: Uncheck Configure for  HTTPS parameter;

 

Step 9: Click Create button;

 

Step 10: Install Stimulsoft.Reports.Angular.NetCore NuGet package:

•Select Manage NuGet Packages ... command in the context menu of the project;
•Specify Stimulsoft.Reports.Angular.NetCore in the search bar on the Browse tab;
•Select the item, define the version of the package, and click Install. When updating the package, click the Update button.

 

Step 11: Add ViewerController to Conntrollers folder:

•Call context menu of Controllers folder;
•Select Add item;
•Choose Controller... command;
•Set MVC Controller - Empty as controller type;
•Click Add button;
•Specify controller name. For example, ViewerController;
•Click the Add button.

 

Step 12: Create the Reports folder in the project, and add a report file to it. For example, add MasterDetail.mrt report.

 

Step 13: Add below code in ViewerController.cs.

 

ViewerController.cs

...

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Stimulsoft.Report;

using Stimulsoft.Report.Angular;

using Stimulsoft.Report.Web;

 

namespace AngularViewer.Controllers

{

[Controller]

public class ViewerController : Controller

{

 

//Specify viewer options

[HttpPost]

public IActionResult InitViewer()

{

var requestParams = StiAngularViewer.GetRequestParams(this);

var options = new StiAngularViewerOptions();

options.Actions.ViewerEvent = "ViewerEvent";

return StiAngularViewer.ViewerDataResult(requestParams, options);

}

 

//ViewerEvent() that will process viewer requests.

[HttpPost]

public IActionResult ViewerEvent()

{

var requestParams = StiAngularViewer.GetRequestParams(this);

 

if (requestParams.Action == StiAction.GetReport)

{

var report = StiReport.CreateNewReport();

var path = StiAngularHelper.MapPath(this, $"Reports/MasterDetail.mrt");

report.Load(path);

return StiAngularViewer.GetReportResult(this, report);

}

 

return StiAngularViewer.ProcessRequestResult(this);

}

}

}

...

 

 

Step 14: Open project folder in explorer;

 

Step 15: Install Angular Client Components from npm.

 

 

npm install stimulsoft-viewer-angular

 

 

Step 16: Close console;

 

Step 17: Delete the ClientApp folder;

 

Step 18: Go to the AngularViewer folder and open console;

 

Step 19: Enter ng new ClientApp command in console:

 

 

 

ng new ClientApp

 

 

 

Step 20: Enter ‘N’ to not use routing;

 

Step 21: Select the CSS format and click Enter button;

 

Step 22: Close console and go to ClientApp folder;

 

Step 23: Open console and download stimulsoft-viewer-angular.

 

 

 

npm install stimulsoft-viewer-angular

 

 

 

Step 24: Close console;

 

Step 25: Open app.module.ts file in the editor from "...ClientApp\src\app\" directory, and add StimulsoftViewerModule. Specify below code in app.module.ts:

 

app.module.ts

...

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

import { NgModule } from '@angular/core';

import { StimulsoftViewerModule } from 'stimulsoft-viewer-angular';

import { HttpClientModule } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule } from '@angular/forms';

 

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

 

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

StimulsoftViewerModule

HttpClientModule,

BrowserAnimationsModule,

FormsModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

...

 

 

Step 26: Open app.component.html file in the editor from "...ClientApp\src\app\" directory, and add AppComponent. Specify below code in app.component.html:

 

app.component.html

...

<stimulsoft-viewer-angular

[requestUrl]="'http://localhost:60801/Viewer/{action}'"

[action]="'InitViewer'"

[height]="'600px'"

></stimulsoft-viewer-angular>

...

 

 

Where:

•[requestUrl] is URL to ViewerController with {action} template. You can find out the URL to ViewerController in launchSettings.json file from the "...\Properties" directory.
•[action] is an action name to initialize an angular viewer.
•[height] is viewer height.

 

Step 27: Go to the visual studio and run the project. After the project run, you can see the viewer with a specific report.

 

Information

 

If your project does not start, try to delete node_modules folder and package-lock.json file from the "...ClientApp\" directory.