feature(REPORT-534398): Bold Reports 14.1 Release changes

angular.json

@@ -20,10 +20,8 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -38,17 +36,13 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": [
-              "./node_modules/jquery/dist/jquery.js"
-            ],
+            "scripts": [],
             "allowedCommonJsDependencies": [
               "bootstrap",
-              "prismjs",
-              "@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min",
-              "@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min",
-              "@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min",
-              "@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min",
-              "codemirror/lib/codemirror",
+              "@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min",
+              "@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min",
+              "@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min",
+              "@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min",
               "codemirror/addon/hint/show-hint",
               "codemirror/addon/hint/sql-hint",
               "codemirror/mode/sql/sql",
@@ -78,12 +72,8 @@
                   "maximumError": "30mb"
                 }
               ]
-            },
-            "development": {
-              "outputHashing": "all"
             }
-          },
-          "defaultConfiguration": "production"
+          }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -106,11 +96,8 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
               "src/styles.scss"
@@ -126,8 +113,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json"
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**",
@@ -166,5 +153,6 @@
         }
       }
     }
-  }
+  },
+  "defaultProject": "reports-cli"
 }

build/router.js

@@ -3,35 +3,22 @@ const fs = require("fs");
 
 let importTemplate = `import { {{component}} } from '{{path}}';`;
 let childRouterTemplate = `{ path: '{{path}}', component: {{component}} }`;
-let routerTempalte = `{
+let routerTemplate = `{
   path: '',
   component: {{component}},
   children: [
   {{childRoute}}
   ]
 }`;
 
-let importStatements = [`import { BrowserModule } from '@angular/platform-browser';
-import { Type, ModuleWithProviders, NgModule } from '@angular/core';
-import { BoldReportsModule } from '@boldreports/angular-reporting-components';
-import { Routes, RouterModule } from '@angular/router';
+let importStatements = [`import { Routes, provideRouter, withHashLocation } from '@angular/router';
 import { AppComponent } from './app.component';
 import { PreviewComponent } from './preview/preview.component';
 import { HeaderComponent } from './header/header.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { MainContentComponent } from './main-content/main-content.component';`];
-let moduleTemplate = `@NgModule({
-  declarations: components,
-  imports: [
-    BrowserModule,
-    BoldReportsModule,
-    RouterModule.forRoot(routes, { useHash: true })
-  ],
-  exports: [RouterModule],
-})
+let moduleTemplate = `export const appRoutingProviders = provideRouter(routes, withHashLocation());`;
 
-export class AppRouterModule { }
-`
 let components = ['AppComponent', 'PreviewComponent', 'HeaderComponent', 'SidebarComponent', 'MainContentComponent'];
 let routes = [];
 let childRoutes = [];
@@ -40,9 +27,9 @@ let previewChildRoutes = [];
 gulp.task('generate-router', (done) => {
   let samples = JSON.parse(fs.readFileSync('./src/app/components/samples.json', 'utf8')).samples;
   let defaultSampleData = samples[0];
-  let initilaReportRouterPath =  defaultSampleData.routerPath ? defaultSampleData.basePath + '/' + defaultSampleData.routerPath : defaultSampleData.basePath;
+  let initilaReportRouterPath = defaultSampleData.routerPath ? defaultSampleData.basePath + '/' + defaultSampleData.routerPath : defaultSampleData.basePath;
 
-  //Initila routing
+  //Initial routing
   routes.push(`{ path: '', redirectTo: '${initilaReportRouterPath}/', pathMatch: 'full' }`);
 
   for (let i = 0; i < samples.length; i++) {
@@ -65,19 +52,16 @@ gulp.task('generate-router', (done) => {
   components.push('RDLCComponent');
   previewChildRoutes.push(childRouterTemplate.replace('{{path}}', `report-designer/rdlc/`).replace('{{component}}', 'RDLCComponent'));
 
-  routes.push(routerTempalte.replace('{{component}}', `AppComponent`).replace('{{childRoute}}', childRoutes.join(',\n\  ')));
-  routes.push(routerTempalte.replace('{{component}}', `PreviewComponent`).replace('{{childRoute}}', previewChildRoutes.join(',\n\  ')));
+  routes.push(routerTemplate.replace('{{component}}', `AppComponent`).replace('{{childRoute}}', childRoutes.join(',\n\  ')));
+  routes.push(routerTemplate.replace('{{component}}', `PreviewComponent`).replace('{{childRoute}}', previewChildRoutes.join(',\n\  ')));
 
   //re-routing
   routes.push(`{ path: '**', redirectTo: '${initilaReportRouterPath}/' }`);
   let importContent = importStatements.join('\n');
-  let componentContent = `const components: any[] | Type<any> | ModuleWithProviders<{}> = [
-  ${components.join(',\n  ')}
-];`;
   let routerContent = `const routes: Routes = [
   ${routes.join(',\n\  ')}
 ];`;
-  let Content = importContent + '\n\r' + componentContent + '\n\r' + routerContent + '\n\r' + moduleTemplate;
+  let Content = importContent + '\n\r' + routerContent + '\n\r' + moduleTemplate;
   fs.writeFileSync('./src/app/common/app.routing.module.ts', Content, 'utf8');
   done();
 });

build/serve.js

@@ -1,12 +1,15 @@
-const gulp = require("gulp");
-const { exec } = require('shelljs');
-var argv = require('yargs').argv;
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import gulp from 'gulp';
+import shelljs from 'shelljs';
+import runSequence from 'gulp4-run-sequence';
+const argv = yargs(hideBin(process.argv)).parse();
+const { exec } = shelljs;
 const ngCli = "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng";
-const runSequence = require('gulp4-run-sequence');
-
 gulp.task('serve', (done) => {
   runSequence('update-extensions-export', 'generate-router', () => {
-    exec(`${ngCli} serve --open --port ${argv?.port || ''}`);
+    const portArg = argv.port ? `--port ${argv.port}` : '';
+    exec(`${ngCli} serve --open ${portArg}`);
     done();
   });
 });

package.json

@@ -8,14 +8,13 @@
     "serve": "gulp serve"
   },
   "dependencies": {
-    "@angular/animations": "21.2.17",
-    "@angular/common": "21.2.17",
-    "@angular/compiler": "21.2.17",
-    "@angular/core": "21.2.17",
-    "@angular/forms": "21.2.17",
-    "@angular/platform-browser": "21.2.17",
-    "@angular/platform-browser-dynamic": "21.2.17",
-    "@angular/router": "21.2.17",
+    "@angular/animations": "22.0.5",
+    "@angular/common": "22.0.5",
+    "@angular/compiler": "22.0.5",
+    "@angular/core": "22.0.5",
+    "@angular/forms": "22.0.5",
+    "@angular/platform-browser": "22.0.5",
+    "@angular/router": "22.0.5", 
     "@boldreports/angular-reporting-components": "14.1.12",
     "@boldreports/javascript-reporting-controls": "14.1.12",
     "@boldreports/javascript-reporting-extensions": "14.1.12",
@@ -32,16 +31,17 @@
     "prismjs": "1.30.0",
     "rxjs": "6.6.0",
     "shelljs": "0.8.5",
-    "tslib": "2.0.0",
-    "zone.js": "0.15.1"
+    "tslib": "2.6.3",
+    "zone.js": "0.16.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "21.2.7",
-    "@angular/cli": "21.2.7",
-    "@angular/compiler-cli": "21.2.17",
+    "@angular-devkit/build-angular": "22.0.5",
+    "@angular/build": "22.0.5",
+    "@angular/cli": "22.0.5",
+    "@angular/compiler-cli": "22.0.5",
     "@types/jasmine": "2.8.8",
     "@types/jasminewd2": "2.0.3",
-    "@types/jquery": "3.3.29",
+    "@types/jquery": "4.0.1",
     "@types/node": "8.9.4",
     "codelyzer": "6.0.0",
     "gulp": "^4.0.2",
@@ -56,8 +56,8 @@
     "protractor": "7.0.0",
     "require-dir": "1.2.0",
     "ts-node": "8.3.0",
-    "tslint": "6.1.0",
-    "typescript": "5.9.3",
+    "tslint": "6.1.3",
+    "typescript": "6.0.3",
     "typo-js": "1.0.3"
   }
 }

src/app/common/app.component.ts

@@ -1,31 +1,34 @@
-import { Component, ViewChild, OnInit, HostListener } from '@angular/core';
+import { ChangeDetectorRef, Component, ViewChild, OnInit, HostListener } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Subscription } from 'rxjs';
 import 'bootstrap';
 import { RouterService } from './router.service';
 import samples from '../components/samples.json';
 import { MainContentComponent } from './main-content/main-content.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
+import { HeaderComponent } from './header/header.component';
 import { Title, Meta } from '@angular/platform-browser';
 
 const data = samples;
 type sampleInfo = typeof data;
 
 @Component({
   selector: 'ej-main',
+  standalone: true,
+  imports: [CommonModule, HeaderComponent, SidebarComponent, MainContentComponent],
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  standalone: false
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
   tocSlideLeft = false;
   enableOverlay = false;
   tocMobileSlideLeft = false;
   private subscriptions = new Subscription();
-  @ViewChild('body', { static: true }) body: MainContentComponent;
-  @ViewChild('sidebar', { static: true }) sidebar: SidebarComponent;
-  constructor(private routerService: RouterService, private titleService: Title, private meta: Meta) { }
+  @ViewChild('body', { static: true }) body!: MainContentComponent;
+  @ViewChild('sidebar', { static: true }) sidebar!: SidebarComponent;
+  constructor(private routerService: RouterService, private titleService: Title, private meta: Meta, private cdr: ChangeDetectorRef) { }
   ngOnInit(): void {
-    let sampleData: sampleInfo['samples'][0];
+    let sampleData!: sampleInfo['samples'][0];
     this.subscriptions.add(this.routerService.sampleUrl.subscribe((url) => {
       if (url === '/') {
         sampleData = data.samples[0];
@@ -37,9 +40,9 @@ export class AppComponent implements OnInit {
       if (!sampleData) {
         sampleData = data.samples[0];
       }
-      this.sidebar.selectedPath = sampleData.routerPath;
       this.body.loadSourceCode(sampleData);
       this.updateMetaData(sampleData);
+      this.cdr.markForCheck();
     }));
     let bannerData = data.banner;
     this.subscriptions.add(this.routerService.navEnd.subscribe(() => {
@@ -64,9 +67,9 @@ export class AppComponent implements OnInit {
     this.meta.updateTag({ name: 'description', property: 'og:description', content: sampleData.metaData.description });
   }
 
-  @HostListener('window:resize')
-  onResize(): void {
-    let sampleData: sampleInfo['samples'][0];
+  @HostListener('window:resize', ['$event'])
+  onResize(event?: Event): void {
+    let sampleData!: sampleInfo['samples'][0];
     this.subscriptions.add(this.routerService.sampleUrl.subscribe((url) => {
       if (url === '/') {
         sampleData = data.samples[0];
@@ -91,7 +94,7 @@ export class AppComponent implements OnInit {
   }
 
   private setReportsHeight(sampleData: sampleInfo['samples'][0]): void {
-    let style: HTMLElement = document.getElementById('reports-style');
+    let style: HTMLElement | null = document.getElementById('reports-style');
     if (!style) {
       style = document.createElement('style');
       style.id = 'reports-style';

src/app/common/header/header.component.html

@@ -20,6 +20,6 @@
     <!-- <a class="ej-sb-button nav-link bold-schedule-demo" href="https://www.boldreports.com/schedule-free-demo" target="_blank" rel="noreferrer">Schedule
       Free Demo</a> -->
       <a class="ej-sb-button nav-link product-detail" href="https://www.boldreports.com/embedded-reporting/angular-report-viewer" target="_blank" rel="noreferrer">Product Detail</a>
-    <a class="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/register/reports/enterprise?evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" target="_blank" rel="noreferrer">Try it Free</a>
+    <a class="ej-sb-button nav-link try-it-free" href="https://www.boldreports.com/register/reports?evaluation=v2" rel="noreferrer">Try it Free</a>
   </div>
 </div>

src/app/common/header/header.component.ts

@@ -1,22 +1,23 @@
 import { Component, Output, EventEmitter, Inject } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import samples from '../../components/samples.json';
 import { Router } from '@angular/router';
-import { DOCUMENT } from '@angular/common';
 import { RouterService } from '../router.service';
 
 const data = samples;
 
 @Component({
   selector: 'ej-header',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
-  standalone: false
+  styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {
   platforms: string[];
   platformName = data.platform;
-  document;
-  constructor(private routerService: RouterService, private router: Router, @Inject(DOCUMENT) document) {
+  document: Document;
+  constructor(private routerService: RouterService, private router: Router, @Inject(DOCUMENT) document: Document) {
     this.document = document;
     this.platforms = Object.keys(data.otherPlatforms);
   }
@@ -40,7 +41,7 @@ export class HeaderComponent {
     }
     platformSamplePath = this.getRouterPath(this.platformName, platform, sampleName);
     const reportPath = routerData.reportRouterPath ? (platformBasePath + '/' + platformSamplePath) : platformSamplePath;
-    window.open(this.document.location.origin + "/" + data.otherPlatforms[platform] + reportPath, '_self');
+    window.open(this.document.location.origin + "/" + (data.otherPlatforms as Record<string, string>)[platform] + reportPath, '_self');
   }
 
   private getRouterPath(curPlatform: string, targetplatform: string, sampleName: string): string {

src/app/common/main-content/main-content.component.html

@@ -78,7 +78,7 @@ <h1 class="ej-title" #title></h1>
         <div class="cnt-text cnt-text-3" #features[2]></div>
       </div>
     </div>
-    <a class="free-trial-url" target="_blank" rel="noreferrer" #freeTrialUrl>
+    <a class="free-trial-url" target="_blank" rel="noreferrer" [href]="data.banner.freeTrialUrl">
       <div class="free-trial">TRY IT FOR FREE</div>
     </a>
   </div>