Issue building application

[stuartbloom]

Hi, and sorry if this is a silly question, but for once googling has not helped :(

I have installed the components and when I run the application with the cli everything works great.

I am now moving to create a deployable build by running au build --env prod. Unfortunately I get the following errors in my console:

Can someone point me in the right direction?

Thanks in advance

[JeroenVinke]

This sounds similar to aurelia/cli#567. Could you show me the steps involved to reproduce this issue?

[stuartbloom]

Sure.

I created a new Aurelia application with the following configuration:

Project Configuration
    Name: PVPortal2
    Platform: Web
    Transpiler: TypeScript
    Markup Processor: None
    CSS Processor: Sass
    Unit Test Runner: Karma
    Editor: Visual Studio Code

I allowed it to install project dependencies.

I followed the instructions here.

Install all the controls.

Note you dont even need to set anythin up in the UI.

Running au run will work fine, running au build --env prod and copying the index.html file and scripts folder to an IIS folder and browse to that folder will give you that result

[karthickthangasamy]

@stuartbloom Using external resources is the cause for the issue. While removing bridge integration changes and hosting the application in IIS, works as expected which needs to be fixed in Aurelia CLI.

[stuartbloom]

@karthickthangasamy so the question is how can i create a production build that will work when hosted by IIS?

[karthickthangasamy]

@stuartbloom Can you please refer the build tasks to bundle for production.?

We used aurelia-bundler to deploy application in GitHub page.

[stuartbloom]

@karthickthangasamy sure, but I am not sure what I am looking at here, or how it fits in with my application.

Can you be a bit more specific please?

[karthickthangasamy]

@stuartbloom We can make use of aurelia-bundler to generate bundles of our assets and reduce fewer request.

Refer aurelia-bundler guide to getting started with bundling.

[stuartbloom]

@karthickthangasamy my application uses the cli and npm; will this work in the same way?

Thanks

[stuartbloom]

@karthickthangasamy furthermore, creating an application using au new does not create the build folder and its contents :(

[JeroenVinke]

Take a look at https://github.com/JeroenVinke/aurelia-cli-syncfusion. I did not encounter the errors regarding aurelia-templating-resources, but did get a few 404's because the files of aurelia-syncfusion-bridge were not in the bundle. Adding these resources resolved those 404's.

What I did was: au build --env prod and copied the index.html and scripts folder to a folder called deployed. Then I ran npm install http-server -g and http-server . from the deployed directory. This didn't give me any errors.

Could you please compare your project setup to https://github.com/JeroenVinke/aurelia-cli-syncfusion and report the differences? Thanks

[stuartbloom]

@JeroenVinke thank you so much.

=The main difference between our applications is this registration of the plugin.

Yours is .plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.ejGrid().ejTemplate()) whereas mine is .plugin("aurelia-syncfusion-bridge", (syncfusion) => syncfusion.useAll()).

If I use your setup all is good, but I want to ensure that I have all components available to me....

Thanks again in advance for any advice

[karthickthangasamy]

@stuartbloom Register the plugin as like .plugin("aurelia-syncfusion-bridge", (syncfusion) => syncfusion.useAll()) and include all the 404's path into resources array as mentioned by @JeroenVinke here

[stuartbloom]

@karthickthangasamy that is what i have done, and I still get the errors.

Here are my main.ts and aurelia.json files.

files.zip

It looks cvery similar to me and I still cannot get a deployed app with all the Syncfusion controls registered, even when they are not being used.

[stuartbloom]

oops, wrong json file. this is it.
aurelia.zip

[karthickthangasamy]

@stuartbloom In the aurelia.json the below code snippet needs to be updated to register all the widgets.

"resources": [
    "grid/grid.js",
    "grid/column.js",
    "chart/chart.js",
    "chart/series.js",
    "sunburstchart/sunburstchart.js",
    "sunburstchart/sunburstlevels.js",
    "map/map.js",
    "map/layer.js",
    "treemap/treemap.js",
    "treemap/level.js",
    "rangenavigator/rangenavigator.js",
    "rangenavigator/rangeseries.js",
    "diagram/diagram.js",
    "heatmap/heatmap.js",
    "heatmaplegend/heatmaplegend.js",
    "sparkline/sparkline.js",
    "symbolpalette/symbolpalette.js",
    "overview/overview.js",
    "pager/pager.js",
    "bulletgraph/bulletgraph.js",
    "bulletgraph/qualitativerange.js",
    "circulargauge/circulargauge.js",
    "lineargauge/lineargauge.js",
    "digitalgauge/digitalgauge.js",
    "splitter/splitter.js",
    "datepicker/datepicker.js",
    "gantt/gantt.js",
    "treegrid/treegrid.js",
    "treegrid/treegridcolumn.js",
    "colorpicker/colorpicker.js",
    "dialog/dialog.js",
    "scroller/scroller.js",
    "barcode/barcode.js",
    "pdfviewer/pdfviewer.js",
    "numerictextbox/numerictextbox.js",
    "currencytextbox/currencytextbox.js",
    "percentagetextbox/percentagetextbox.js",
    "timepicker/timepicker.js",
    "toolbar/toolbar.js",
    "menu/menu.js",
    "maskedit/maskedit.js",
    "treeview/treeview.js",
    "kanban/kanban.js",
    "kanban/kanbancolumn.js",
    "ribbon/ribbon.js",
    "spreadsheet/spreadsheet.js",
    "spreadsheet/sheet.js",
    "rating/rating.js",
    "listbox/listbox.js",
    "listview/listview.js",
    "navigationdrawer/navigationdrawer.js",
    "rotator/rotator.js",
    "rte/rte.js",
    "dropdownlist/dropdownlist.js",
    "autocomplete/autocomplete.js",
    "radialmenu/radialmenu.js",
    "radialmenu/item.js",
    "radialslider/radialslider.js",
    "tile/tile.js",
    "accordion/accordion.js",
    "tab/tab.js",
    "checkbox/checkbox.js",
    "radiobutton/radiobutton.js",
    "togglebutton/togglebutton.js",
    "splitbutton/splitbutton.js",
    "groupbutton/groupbutton.js",
    "datetimepicker/datetimepicker.js",
    "progressbar/progressbar.js",
    "tagcloud/tagcloud.js",
    "button/button.js",
    "slider/slider.js",
    "fileexplorer/fileexplorer.js",
    "pivotgrid/pivotgrid.js",
    "pivotchart/pivotchart.js",
    "pivotgauge/pivotgauge.js",
    "pivotschemadesigner/pivotschemadesigner.js",
    "pivottreemap/pivottreemap.js",
    "waitingpopup/waitingpopup.js",
    "reportviewer/reportviewer.js",
    "schedule/schedule.js",
    "schedule/scheduleresource.js",
    "uploadbox/uploadbox.js",
    "signature/signature.js",
    "tooltip/tooltip.js",
    "common/template.js"
  ]

aurelia-json.zip

[JeroenVinke]

"resources": [
  "**/*.js"
]

should work as well. I am looking into this and will report back

[stuartbloom]

@JeroenVinke @karthickthangasamy

awesome, thanks gents :)

[stuartbloom]

@JeroenVinke @karthickthangasamy

Just an update. So I have added the "**/*.js" to the dependencies, however, I am getting one final error:

here is the entry for aurelia-syncfusion-bridge:

{
	"name": "aurelia-syncfusion-bridge",
	"path": "../node_modules/aurelia-syncfusion-bridge/dist/amd",
	"main": "index",
	"resources": [
		"**/*.js"
	]
}

Any ideas?

Thanks again for your time

[JeroenVinke]

@stuartbloom I am close to solving this error, just need to confirm everything works

[stuartbloom]

👍 thanks @JeroenVinke so glad it wasn't something I have done :) Or; maybe it was..

[JeroenVinke]

jquery-validation-unobtrusive was causing an error, which made the bundle invalid. This causes requirejs to fetch everything that's in vendor-bundle from the original source (so it does http requests to node_modules/aurelia-syncfusion-bridge/index.js etc) even though it is in the bundle.

The problem with jquery-validation-unobtrusive was that it tried to use jquery-validation before it was loaded. Luckily, the fix, UMD support in master, so installing jquery-validation-unobtrusive from master fixed the error:

npm install github:aspnet/jquery-validation-unobtrusive#master

use these two configs for aurelia-syncfusion-bridge and syncfusion-javascript:

          {
            "name": "aurelia-syncfusion-bridge",
            "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd",
            "main": "index",
            "resources": [
              "**/*.js"
            ]
          },
          {
            "name": "syncfusion-javascript",
            "path": "../node_modules/syncfusion-javascript/",
            "main": false,
            "resources": [
              "Content/ej/web/ej.widgets.core.bootstrap.min.css",
              "Content/ej/web/bootstrap-theme/ej.theme.min.css"
            ]
          },

I noticed you had aurelia-testing, aurelia-templating resources defined in aurelia.json twice. please check and make sure that they occur only once

Fonts/images cannot be bundled using the CLI right now. So you need to copy the fonts/images to the location where syncfusion expects them. This can be done using copyFiles in aurelia.json:

    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage"
    },
    "copyFiles": {
      "node_modules/syncfusion-javascript/Content/ej/web/common-images/**/*": "common-images"
    },

In app.js load the following stylesheets:

<require from="syncfusion-javascript/Content/ej/web/ej.widgets.core.bootstrap.min.css"></require>
  
  <require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.theme.min.css"></require>

pushed the resulting app here: https://github.com/JeroenVinke/aurelia-cli-syncfusion

[JeroenVinke]

@karthickthangasamy can you verify that this fixes all issues using a new app and update the instructions accordingly?

[stuartbloom]

@JeroenVinke SOO very close, thanks. Just complied your application, and I notice this error:

Tracing syncfusion-javascript...
error C:\Users\sbloom\Downloads\aurelia-cli-syncfusion-master (1)\aurelia-cli-syncfusion-master\node_modules\syncfusion-javascript\.js
Tracing syncfusion-javascript/Content/ej/web/ej.widgets.core.bootstrap.min...
Tracing syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.theme.min...

Furthermore, when I add the copy files to my json file, I get a long error message that is in the attachment.
copy_error.zip

Am I still missing something? I have done a diff on out aurelia.json files and they are identical apart from the name?

Thanks again

Stuart

[JeroenVinke]

The first one is safe to ignore and will be fixed in the CLI at some point. The second one I didn't get. perhaps you could try to create the common-images folder in the project root

[stuartbloom]

Thats great, thanks @JeroenVinke

I thought about that but no joy. For now I will manually copy that folder into the project root.

Thanks very much for your help

I will leave this issue open until @karthickthangasamy comes back with confirmation and he can close it.

[adriatic]

I am watching this discussion and want to thank @stuartbloom on his persistence and determination to stay with the problem. As you likely know aurelia-syncfusion-bridge is a common effort between our team (Aurelia-UI-Toolkits) and Syncfusion, where we provided the initial design and @karthickthangasamy led the Syncfusion team of developers.

So, @JeroenVinke and I think of syncfusion bridge as "our baby", which should explain @JeroenVinke's determination to help you.

[stuartbloom]

@adriatic not a problem, its a pleasure to deal with folks that really want their code to succeed. I am currently evaluating Syncfusion, and must admit its nice (I have used Kendo in the past).. But what really makes this is the support @JeroenVinke has give; really top rate :)

[adriatic]

But what really makes this is the support @JeroenVinke has give; really top rate :)

That is because you got a world class architect (who created most of the original KendoUI bridge) to act in the support role. Such situation cannot be sustained as we need to move ahead with new projects.

I am genuinely expecting that the hundreds of folks that benefited from Jeroen's help will eventually join this project (this includes the other two bridges) and carry on the help to other newcomers. This is the core principles behind OSS - not the popular opinion how OSS developers work full time to make their living, then the second full time to write open source code which is available to everyone for free and then the third full time to support that code 😄

[stuartbloom]

@adriatic agreed, maybe one day I will also be able to help :)

[adriatic]

All it takes is to stay connected with the project. Whenever you see someone asking for a solution of a problem you already know how to solve - you are ready to help!

[karthickthangasamy]

@stuartbloom @JeroenVinke The aurelia-syncfusion-bridge@^0.7.0 no longer needs jquery-validation-unobtrusive.

@JeroenVinke The steps you have provided works as expected. 👍
@stuartbloom I have updated cli-integration steps accordingly. Please let us know if you are facing any issues, we are happy to help you.

[stuartbloom]

@karthickthangasamy @JeroenVinke

Thats great gents, thank you so much for your time :)