В этой главе будет рассмотрен пример использования компонентов Stimulsoft в приложениях Angular.

 

 
Создайте проект Angular
В терминале перейдите в каталог, в котором необходимо разместить будущий проект. Затем следует выполнить команду.

 

terminal

 

ng new sti-angular-js --no-standalone --routing --ssr=false --style css

 

 

 

Установите компоненты Stimulsoft
Для начала необходимо скачать пакет Stimulsoft. Если необходимы только инструменты отчетности, то следует скачать пакет Stimulsoft Reports.JS. Если же требуются и средства отчетности и дашборды, то пакет Stimulsoft Dashboards.JS. Далее, следует скопировать скрипты Stimulsoft в проект по пути sti-angular-js./src/scripts.

 

 

Настройте конфигурацию Angular проект

Для этого в секции scripts файла angular.json следует указать массив путей к файлам скриптов в проекте.

 

angular.json

...

"scripts": [

"src/scripts/stimulsoft.reports.engine.js",

"src/scripts/stimulsoft.reports.export.js",

"src/scripts/stimulsoft.reports.chart.js",

"src/scripts/stimulsoft.reports.maps.js",

"src/scripts/stimulsoft.reports.import.xlsx.js",

"src/scripts/stimulsoft.viewer.js",

"src/scripts/stimulsoft.designer.js",

"src/scripts/stimulsoft.blockly.editor.js"

]

...

 

 

В секции architect для параметра builder определите тип как browser, а не application. Кроме этого параметр в options следует переименовать с browser на main.

 

angular.json

...

"architect": {

"build": {

"builder": "@angular-devkit/build-angular:browser",

"options": {

"main": "src/main.ts"

}

}

}
...

 

 

Если подразумевается использование во вьювере или дизайнере уже готовых отчетов, то следует добавить путь к ним в секции assets.

 

angular.json

...

"assets": [

"src/reports"

]
...

 

 

Добавьте модуль HttpClientModule

Необходимо импортировать и затем подключить модуль HttpClientModule в файле app.module.ts.

 

app.module.ts

 

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

 

@NgModule({

...

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule

],

 ...

})

 

 

 

Разместите компонент Stimulsoft
В файле app.component.ts также необходимо импортировать HttpClientModule. Затем, можно импортировать Stimulsoft через директиву declare var Stimulsoft: any;. И в классе AppComponent следует определить вызов компонентов Stimulsoft. Например, дизайнер с пустым отчетом.

 

app.component.ts

 

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

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

 

declare var Stimulsoft: any;

 

@Component({

selector: 'app-root',

template: `<div>

<h2>Stimulsoft Reports.JS - Invoice.mrt - Designer</h2>

<div id="сontent"></div>

</div>`

})

 

export class AppComponent {

designer: any = new Stimulsoft.Designer.StiDesigner(false, "StiDesigner", false);

 

ngOnInit() {

var report = new Stimulsoft.Report.StiReport();

 

this.designer.report = report;

this.designer.renderHtml("сontent");

}

 

constructor(private http: HttpClientModule) {

 

}

}

 

 

 

Или, вызвать вьювер с ранее созданным отчетом.

 

index.html

...

export class AppComponent {

viewer: any = new Stimulsoft.Viewer.StiViewer(false, "StiViewer", false);

 

ngOnInit() {

var report = new Stimulsoft.Report.StiReport();

report.loadFile("reports/Invoice.mrt");

 

this.viewer.report = report;

this.viewer.renderHtml("сontent");

}

 

constructor(private http: HttpClientModule) {

 

}

}

...

 

 

Первый запуск
Ангуляр приложение по умолчанию определяет стартовую команду в файле package.json. Поэтому для запуска проекта, достаточно в корневой папке проекта из терминала выполнить командy.

 

console

 

npm start