I'm developing new pages inside an old WebForm web site project.
I want to start using EJ2 components for them, in particular charts.
But I don't understand how should I have to integrate the necessary javascript files to make it work.
In the old days we used to put the script like the following:
<script src="../Scripts/Syncfusion-16.3.0.29/common/ej.core.min.js"></script>
<script src="../Scripts/Syncfusion-16.3.0.29/common/ej.data.min.js"></script>
<script src="../Scripts/Syncfusion-16.3.0.29/common/ej.scroller.min.js"></script>
or using the bundling:
bundles.Add(new ScriptBundle("~/bundles/myscripts").Include(
"~/Scripts/abc.js",
"~/Scripts/efg.js"));
I can't clone or integrate your quickstart project into my already existing project, because I want to keep it clean, and I don't like even to copy 300MB of files into the project, because I will use 2~3MB in the end, minified JS + compiled CSS...
So I think I can avoid the NPM, right?
I've tried to add systemjs.config.js file but I can't understand how to correctly configure it, and I get always "ej is not defined" error.
System.config({
paths: {
'syncfusion:': '/_assets/vendors/Syncfusion/@syncfusion',
},
map: {
app: 'app',
//Syncfusion packages mapping
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
,
},
packages: {
'app': { main: 'app', defaultExtension: 'js' }
}
});
For example why there is the last line 'app':... I'm not using Angular/React/Vue/ES6, I'm using only plain old javascript in an HTML page.
Maybe using WebPack could be simpler?
