Export to Excel with SystemJS - ghiscoding/aurelia-slickgrid GitHub Wiki

Context

If you have issues with Excel Export and SystemJS, you can follow these steps. It is recommended to use yarn and not NPM since you might get odd results with it.

Solution

  1. make sure both dependencies are in package.json 
{
  "excel-builder-webpack": "^1.0.3",
  "excel-builder-webpacker": "^1.0.6"
}

and make sure of the following

"engines": {
  "node": ">=10.0.0"
}
  1. modify aurelia.json and add the following (i.e. below "name": "excel-builder-webpack")
{
  "name": "excel-builder-webpacker",
  "path": "../node_modules/excel-builder-webpacker",
  "main": "src/excel-builder",
  "deps": ["jszip", "lodash"]
},

and add "node_modules/aurelia-slickgrid/dist/styles/css/*": "slickgrid-theme-bootstrap" to copyFiles section of aurelia.json

"copyFiles": {
  "node_modules/bootstrap/dist/fonts/*": "bootstrap/dist/fonts",
  "node_modules/font-awesome/fonts/*": "font-awesome/fonts",
  "node_modules/aurelia-slickgrid/dist/styles/css/*": "slickgrid-theme-bootstrap"
}

  1. yarn install

  2. if you want to publish to Google Cloud Platform a) add app.yaml

runtime: nodejs10
handlers:
- url: /
  static_files: index.html
  upload: index.html

- url: /(.*)
  static_files: \1
  upload: (.*)

b) modify index.html by copying the 3 CSS files and commenting out the original (I don't know exactly why but after many trials and errors this just works!)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aurelia</title>
       <!-- <link rel="stylesheet" type="text/css" href="../node_modules/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="../node_modules/aurelia-slickgrid/dist/lib/multiple-select/multiple-select.css">
    <link rel="stylesheet" type="text/css" href="../node_modules/aurelia-slickgrid/dist/styles/css/slickgrid-theme-bootstrap.css"> -->
   <link rel="stylesheet" type="text/css" href="./flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="./multiple-select.css">
<link rel="stylesheet" type="text/css" href="./slickgrid-theme-bootstrap.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <script src="scripts/vendor-bundle.js"></script>
    <script>SystemJS.import("aurelia-bootstrapper").catch(function(err) { console.log(err); })</script>
  </body>
</html>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️