Angular CLI

SpreadJS では、Angular CLI 開発環境で、個別のモジュールとプラグインの両方を使用することができます。

モジュールとプラグインをの使用

次の手順を実行します。

Angular CLIをインストールする
コマンドプロンプトウィンドウを開き、次のコマンドを入力します。
```
npm install -g @angular/cli
```
Angularアプリを作成する
Angularアプリを作成し、アプリフォルダに移動します。
```
ng new my-app
cd my-app
```
プロジェクトでSpreadJSモジュールとプラグインをインストールする
次のコマンドを使用して、SpreadJS のモジュールとプラグインをインストールします。
```
npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print @mescius/spread-sheets-angular
```

angle.jsonファイルでSpreadJS のCSSを構成する

次のように、angular.jsonファイルでSpreadJS のCSSを構成します。

{  
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  
    "version": 1,  
    "newProjectRoot": "projects", 
    "projects": {    
        "my-app": {      "projectType": "application",   
        "schematics": {},      
        "root": "",     
        "sourceRoot": "src",      
        "prefix": "app",      
        "architect": {        
            "build": {          
                "builder": "@angular-devkit/build-angular:browser",              "options": {           
                    "outputPath": "dist/my-app",            
                    "index": "src/index.html",           
                     "main": "src/main.ts",           
                     "polyfills": [              
                        "zone.js"          
                      ],           
                     "tsConfig": "tsconfig.app.json", 
                     "assets": [              
                        "src/favicon.ico",              
                        "src/assets"            
                    ],           
                     "styles": [     
                         "src/styles.css",    
                         "./node_modules/@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css"         
                       ],          
                          "scripts": []         
                     },         
                     "configurations": {           
                         "production": {            
                              "budgets": [           
                                 {                  
                                    "type": "initial",  
                                    "maximumWarning": "500kb",      
                                    "maximumError": "1mb"     
                                    },  
                                    {                  
                                    "type": "anyComponentStyle",                
                                    "maximumWarning": "2kb",                  
                                    "maximumError": "4kb"              
                                    }              
                                 ],              
                                "outputHashing": "all"            
                            },            
                            "development": {             
                            "buildOptimizer": false,        
                            "optimization": false,            
                            "vendorChunk": true,              
                            "extractLicenses": false,             
                            "sourceMap": true,              
                            "namedChunks": true            
                            }          
                        },        
                        "defaultConfiguration": "production"        
                      },        
                        "serve": {          
                            "builder": "@angular-devkit/build-angular:dev-server",          
                            "configurations": {           
                                "production": {              
                                "browserTarget": "my-app:build:production"            
                          },            
                            "development": {          
                                "browserTarget": "my-app:build:development"            
                          }         
                        },          
                        "defaultConfiguration": "development"        
                        },        
                        "extract-i18n": {          
                            "builder": "@angular-devkit/build-angular:extract-i18n",                      
                            "options": {                    
                                "browserTarget": "my-app:build"          
                             }       
                           },       
                         "test": {          
                            "builder": "@angular-devkit/build-angular:karma",          
                            "options": {            
                                "polyfills": [              
                                    "zone.js",              
                                        "zone.js/testing"            
                            ],            
                            "tsConfig": "tsconfig.spec.json",            
                               "assets": [              
                                    "src/favicon.ico",            
                                    "src/assets"            
                            ],           
                            "styles": [            
                              "src/styles.css"            
                            ],            "scripts": []        
                          }
                      }
                  }
             }  
      }
}

Angular アプリケーションで SpreadJS を使用する

SpreadJS モジュールをインポートするには、app.module.tsファイルを次のように変更します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
@NgModule({  
    declarations: [   
         AppComponent  
],  
imports: [    
    BrowserModule,    
    SpreadSheetsModule  
],  
providers: [],  b
ootstrap: [AppComponent]})
export class AppModule { }

SpreadJS コンポーネントを表示するには、app.component.html ファイルを次のように変更します。

<gc-spread-sheets [hostStyle]="hostStyle" 
(workbookInitialized)="initSpread($event)">
</gc-spread-sheets>

SpreadJS コンポーネントのデータの入出力を実装するには、app.component.tsを次のように変更します。

import { Component } from '@angular/core';
import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print"; 
@Component({  
    selector: 'app-root',  
    templateUrl: './app.component.html',  
    styleUrls: ['./app.component.css']
})
export class AppComponent { 
    hostStyle = {    
        width: '100%',    
        height: '600px',    
        overflow: 'hidden',    
        float: 'left'  
};  
        initSpread($event: any) {    
            let spread: GC.Spread.Sheets.Workbook = $event.spread;    
            let sheet = spread.getActiveSheet();    
            sheet.setValue(0, 0, "Hello SpreadJS");    
            spread.print();  
    }
}

CompilerOptions のパスを追加するには、tsconfig.json を次のように変更します。

{  
"compileOnSave": false,  
"compilerOptions": {    
    "baseUrl": "./",    
    "outDir": "./dist/out-tsc",    
    "forceConsistentCasingInFileNames": true,    
    "strict": true,    
    "noImplicitOverride": true,    
    "noPropertyAccessFromIndexSignature": true,   
    "noImplicitReturns": true,    
    "noFallthroughCasesInSwitch": true,    
    "sourceMap": true,    
    "declaration": false,    
    "downlevelIteration": true,    
    "experimentalDecorators": true,    
    "moduleResolution": "node",    
    "importHelpers": true,    
    "target": "ES2022",    
    "module": "ES2022",   
    "useDefineForClassFields": false,    
    "lib": [      
        "ES2022",      
        "dom"   
    ],    
    "paths": {     
         "@mescius/spread-sheets": [ "node_modules/@mescius/spread-common" ]   
 }  
},  
"angularCompilerOptions": {    
    "enableI18nLegacyMessageIdFormat": false,    
    "strictInjectionParameters": true,    
    "strictInputAccessModifiers": true,    
    "strictTemplates": true  
}
}

アプリをビルドして実行する
次のコマンドで、アプリをビルドして実行します。
```
npm start
```