How to get aurelia-cli and Syncfusion non aurelia-syncfusion-bridge to work?

Question

Windows 7 x64

aurelia-cli 0.23.0

syncfusion 14.4.20

jquery 3.1.1

I saw the other question regarding this but it doesn't seem to follow the bootstrap example. I believe Syncfusion should also be setup using the bootstrap example as a template but I cannot seem to get it to work.

My test project is just a new aurelia-cli project with default settings. I am using the ejDatePicker control as an example.

aurelia.json I added

    {
        "name": "jsrender",
        "path": "../node_modules/jsrender",
        "main": "jsrender",
        "deps": ["jquery"],
        "exports": "$"
      },
      {
            "name": "syncfusion",
            "path": "../node_modules/syncfusion-javascript",
            "main": "/Scripts/ej/web/ej.web.all.min",
            "deps": ["jquery", "jsrender"],
            "exports": "$",
            "resources": [
              "Content/ej/web/ej.widgets.core.min.css",
              "Content/ej/web/bootstrap-theme/ej.theme.min.css"
            ]
          }

app.html

<template>
  <require from="syncfusion/Content/ej/web/ej.widgets.core.min.css"></require>
  <require from="syncfusion/Content/ej/web/bootstrap-theme/ej.theme.min.css"></require>
  <!--Container for ejDatePicker widget-->
  <input id="startDate" type="text" />
</template>

app.js

export class App {
  constructor(){
    $("#startDate").ejDatePicker();
  }
}

main.js

import 'jquery';
import 'jsrender'
import 'syncfusion'
......

I am not getting any errors but the control is not displaying. However if I remove the suncfusion config from aurelia.json then $("#startDate").ejDatePicker(); complains that ejDatePicker is not valid so to me that means that the config in aurelia.json is pulling in the correct javascript file.

Answer 1

I had the $("#startDate").ejDatePicker(); in the constructor instead of attached(). It is working after I made that change.