SpreadJS with Angular CLI

SpreadJS supports using individual module and plugin together in Angular CLI development environment.

Using Module and Plugin together

This involves the following steps:

1. Install the Angular CLI globally

   Open the Command Prompt window and type the following command.

   npm install -g @angular/cli

2. Create a new project using Angular CLI

   Create a new project using the following command and navigate to the project directory:

   ng new my-app
   cd my-app

3. Install SpreadJS modules and plugins in the project

   Install the SpreadJS NPM modules and plugins using the following commands:

   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

4. Configure SpreadJS CSS in angular.json

   Configure the SpreadJS CSS in angular.json as shown below:

   {  
       "$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": []        
                             }
                         }
                     }
                }  
         }
   }

5. Use SpreadJS in an Angular application

   Modify the app.module.ts for importing the module as shown below:

   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 { }

   Modify the app.component.html for viewing the SpreadJS component as shown below:

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

   Modify the app.component.ts for preparing data for the SpreadJS component as shown below:

   import { Component } from '@angular/core';i
   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();  
       }
   }

   Modify the tsconfig.json for adding paths for compilerOptions as shown below:

   {  
   "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  
   }
   }

6. Build and run the project using Angular CLI

   Build and run the project using the following command:

   npm start