This page explains how you can embed the ActiveReports Web Designer component in your Angular application. To run the Angular Application Server, you will require the node.js JavaScript runtime and Angular CLI. Use the following command in the terminal or command prompt to install the Angular CLI:

npm install -g @angular/cli

1. Open Microsoft Visual Studio 2019 and create a new ASP .NET Core Web Application project.

   

2. Type a name for your project and click Create.

   

3. Select ASP.NET Core 5.0 and choose the Angular project template from the dialog.

   

4. Create a new ASP .NET Core Web Application project using the Angular template.

5. Right-click the project in the Solution Explorer and select Manage Nuget Packages.

6. Add the following packages to the project.

   GrapeCity.ActiveReports.Aspnetcore.Designer
GrapeCity.ActiveReports.Aspnetcore.Viewer

7. Create 'resources' folder in your sample project root; you can put your existing reports, themes, and images in this folder.

8. Make sure to set the Build Action property of the resources to 'Embedded Resource'.

9. Open 'Startup.cs' file and add the following 'using' statements at the top.
   using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using System.IO;

10. Open 'Startup.cs' file and add the following global variable in it:

    Startup.cs	Copy Code
    //resources(reports, themes, images) location private static readonly DirectoryInfo ResourcesRootDirectory = new DirectoryInfo(".\\resources\\");

11. Then, add the following code snippet in the ConfigureServices method of the 'Startup.cs' file:

    Startup.cs	Copy Code
    services .AddReporting() .AddDesigner() .AddMvc(options => options.EnableEndpointRouting = false) .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);

12. Similarly, add the following code snippet in the Configure method before UseStaticFiles() middleware, of the 'Startup.cs' file:

    Startup.cs	Copy Code
    app.UseReporting(config => config.UseFileStore(ResourcesRootDirectory)); app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory, false));

13. Expand the ClientApp folder.

14. Open 'package.json' file and add the following packages for ActiveReports' Viewer and Designer under 'dependencies':

    "@grapecity/ar-designer": "latest",
"@grapecity/ar-viewer": "latest",

15. Then, add the following package under the "devDependencies" in 'package.json' file:

    "ncp": "^2.0.0",

16. Replace the 'scripts' section in 'package.json' file with the following content:

    package.json	Copy Code
    "scripts": { "deploy-bundles": "ncp ./node_modules/@grapecity/ar-viewer/dist ../wwwroot/assets && ncp ./node_modules/@grapecity/ar-designer/dist ../wwwroot/assets", "ng": "ng", "start": "echo Starting... && ng serve", "build": "npm run deploy-bundles && ng build", "build:ssr": "ng run WebDesigner_Angular:server:dev", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },

    In the above code, note that you need to replace the application name with your application name.

17. Open ClientApp folder in the command prompt or terminal window and run the following command to install the npm packages.

    npm install

18. Expand the app folder inside the ClientApp\src folder.

19. Open 'app.component.ts' file and replace the existing code with the following code to initialize the Designer instance.

    app.component.ts

    Copy Code

    import { Component, ViewChild, ElementRef, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; declare var GrapeCity: any; declare var $: any; var viewer = null; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { title = 'app'; reportName: any; @ViewChild('viewer', { static: false }) private viewerElement: ElementRef; constructor(private route: ActivatedRoute) { this.route.params.subscribe(params => { const id = params['id']; const designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(); designerOptions.reportInfo = id ? { id: id, name: id } : null; designerOptions.reportItemsFeatures.table.autoFillFooter = true; designerOptions.openButton.visible = true; designerOptions.saveButton.visible = true; designerOptions.saveAsButton.visible = true; designerOptions.documentation.home = 'https://www.grapecity.com/activereportsnet/docs/latest/online-webdesigner/overview.html'; designerOptions.openViewer = this.openViewer.bind(this); designerOptions.dataTab.dataSets.canModify = true; designerOptions.dataTab.dataSources.canModify = true; GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions); }); } ngOnInit() { } public openViewer(options) { if (viewer) { viewer.openReport(options.reportInfo.id); return; } viewer = GrapeCity.ActiveReports.JSViewer.create({ locale: options.locale, element: '#' + options.element, reportService: { url: 'api/reporting', }, reportID: options.reportInfo.id, settings: { zoomType: 'FitPage' }, }); } public closeViewer() { this.viewerElement.nativeElement.firstElementChild.remove(); } }

20. Open the 'app.component.html' file and replace the existing content with the following markup for hosting the element.

    app.component.html	Copy Code
    <body> <div id="designer-id" style="width: 100%; height: 100%;"></div> </body>

21. Select 'index.html' inside the ClientApp\src folder and modify its content as follows:

    index.html

    Copy Code

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>WebDesigner_Angular</title> <base href="/" /> <link rel="stylesheet" href="assets/vendor/css/bootstrap.min.css" /> <link rel="stylesheet" href="assets/vendor/css/fonts-googleapis.css" type="text/css" /> <link rel="stylesheet" href="assets/jsViewer.min.css" /> <link rel="stylesheet" href="assets/web-designer.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> </head> <body> <script src="assets/vendor/js/jquery.min.js"></script> <script src="assets/baseServerApi.js"></script> <script src="assets/jsViewer.min.js"></script> <script src="assets/web-designer.js"></script> <app-root>Loading...</app-root> </body> </html>

22. Open '.csproj' file of your project and add the following section in it:

    .csproj	Copy Code
    <Target Name="ClientBuild" BeforeTargets="BeforeBuild"> <Exec WorkingDirectory="ClientApp" Command="npm install" /> <Exec WorkingDirectory="ClientApp" Command="npm run deploy-bundles" /> </Target>

23. Add a new item 'Web Configuration File' in the application's root and replace the content with the following code:

    web.config	Copy Code
    <configuration> <system.webServer> <security> <requestFiltering allowDoubleEscaping="true"/> </security> </system.webServer> </configuration>

24. Press Ctrl + Shift + B to build your application and then press F5 to run it.