このトピックでは、AngularアプリケーションにJSビューワコンポーネントを組み込む方法について説明します。Angularアプリケーションサーバーを実行するには、NodeJSとAngularCLIが必要です。Angular CLIをインストールするにはコマンドプロンプトで次のコマンドを入力してインストールします。
npm install -g @angular/cli
「AngularでのASP.NET Core」テンプレートを選択して、新しいプロジェクトを追加し、ASP.NET Core のミドルウェアに示したように、ASP.NET Core のミドルウェアでActiveReportsのJSビューワを構成します。
次の手順のように、Angularアプリケーションに対してクライアントアプリケーションを構成します。
ClientAppフォルダを展開します。
package.jsonファイルを開き、依存関係の下にJSビューワの次のパッケージを追加します。
"@grapecity/ar-viewer-ja": "latest",
angular.jsonファイルを開き、JSビューワのcssおよびjsへの次の参照を追加します。
| angular.json |
コードのコピー
|
|---|---|
"styles": ["./node_modules/@grapecity/ar-viewer-ja/dist/jsViewer.min.css"], "scripts": [ "./node_modules/@grapecity/ar-viewer-ja/dist/jsViewer.min.js" ] |
|
ClientApp\srcフォルダ内のappフォルダを展開します。
app.component.tsファイルを開き、そのコードを次のコードに置き換えて、JSビューワのインスタンスを初期化します。また、JSビューワコンポーネントを使用しているため、このファイルに宣言を追加します。
| app.component.ts |
コードのコピー
|
|---|---|
import { Component } from '@angular/core';
declare var GrapeCity: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
title = "app";
viewer: any;
ngAfterViewInit() {
this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
element: '#viewer-host',
});
this.viewer.openReport("DemoReport.rdlx");
}
}
|
|
app.component.htmlファイルを開き、その内容を次の内容に置き換えて、要素をホストします。
| app.component.html |
コードのコピー
|
|---|---|
<body>
<div id="viewer-host"></div>
</body>
|
|
ClientApp\srcフォルダ内のstyles.cssを開き、次のcssを追加します。
| styles.css |
コードのコピー
|
|---|---|
#viewer-host {
width: 100%;
height: 100vh;
}
|
|
ClientApp\srcフォルダ内のmain.tsを開き、bootstrapModuleメソッド内に2番目の引数として{ ngZone: "noop" }を追加します。
platformBrowserDynamic(providers).bootstrapModule(AppModule, { ngZone: "noop" })
.catch(err => console.log(err));
コマンドプロンプトでClientAppフォルダを開き、次のコマンドを実行してnpmパッケージをインストールします。
npm install
［ビルド］ > ［ソリューションのビルド］をクリックして、ソリューションをビルドします。F5を押して実行します。