ghiscoding / Aurelia-Bootstrap-Plugins

Aurelia-Bootstrap-Plugins are Custom Elements to bridge with a set of 3rd party Bootstrap addons
https://ghiscoding.github.io/Aurelia-Bootstrap-Plugins
MIT License
45 stars 23 forks source link

Bug in globalResources-configuration - missing PLATFORM.moduleName #21

Closed FDryer closed 7 years ago

FDryer commented 7 years ago

I am using the ASP.NET Core SPA-template for Aurelia. After installing aurelia-bootstrap-datepicker and starting the application, I got the following error: Uncaught (in promise) Error: Unable to find module with ID: aurelia-bootstrap-datepicker

In my particular case the steps to repro are:

  1. mkdir auDatepicker
  2. cd auDatepicker
  3. dotnet new aurelia
  4. npm install aurelia-bootstrap-datetimepicker --save
  5. npm install eonasdan-bootstrap-datetimepicker --save
  6. npm install
  7. dotnet restore
  8. notepad webpack.config.vendor.js
  9. In webpack.config.vendor.js under 'entry/vendor' add the following lines:
    'aurelia-bootstrap-datetimepicker',
    'eonasdan-bootstrap-datetimepicker',

    save and close the file.

  10. ran webpack --config webpack.config.vendor.js
  11. Opened visual studio 2017 and did the following changes to \ClientApp\boot.js:
  12. import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css';
  13. aurelia.use.plugin(PLATFORM.moduleName('aurelia-bootstrap-datetimepicker'));
  14. hit F5, running the application. boom. Failes with Unable to find module with ID: aurelia-bootstrap-datepicker.

The fix is to add PLATFORM.moduleName in the globalResources-configuration:

export function configure(aurelia, callback) {
  aurelia.globalResources(PLATFORM.moduleName('./abp-datetime-picker'));

  let config = new PickerConfig();

  if (typeof callback === 'function') {
    callback(config);
  }
}
ghiscoding commented 7 years ago

Have you had a look at the ASP.Net client sample I added? Perhaps you could modify the README in that implementation and add these infos if it's essential to have.

Note, I think there's a typo in your fix on the second line, it finished with ))aureli; which is probably wrong

FDryer commented 7 years ago

Thank you for looking into the issue. You are right, there was a typo. I have fixed it now. The proposed fixed was given to me on the gitter/aurelia general discussen channel, and as I'm new to npm/webpack and github, I haven't had the opportunity the the fix myself.

I have also tried the sample you provided, but it fails when I attempt to run it.

ERROR in C:\Users\Downloads\Aurelia-Bootstrap-Plugins-master\client-aspnetcore-ts\node_modules\aurelia-loader-webpack\src\webpack-hot-interface.d.ts
      (59,51): error TS2304: Cannot find name 'NodeModule'.

Which seems to be an unrelated error.

I have installed another plugins(aurelia-validation) using the same steps described in my original post without any issue.

ghiscoding commented 7 years ago

Just for your info, the PLATFORM.moduleName has not (to my knowledge) been fully released yet and/or have not been publicized in their blog yet. So in your case you might need it, because you use a newer template, but for most user they don't need that piece of configuration. I will add notes in the README for this but again, this is not for everyone since not everyone switched to new template yet.

As for my ASP.Net template, it used to work when I first implemented it and now it's broken for unknown reason. That's something I don't like about Aurelia, one day it works and the next day it's broken without understanding why. :(

BTW: I'm trying this new template that you are trying, which is basically this one I think ASP.Net demoed at Build, have you managed to properly load the eonasdan datetime picker CSS file? I got most of it working following your steps but it's only missing the CSS and I did add it in both places inside the webpack.config.vendor.js and inside the boot.ts files but still no styling applied to the input. Does it work for you?

ghiscoding commented 7 years ago

To address the main problem with the missing configurations, I have updated all the plugins README with a special note about aurelia-webpack-plugin 2.0. Also note that as I have mentioned earlier it is still not released (though is now bundled in some of the Aurelia Skeleton), for reference see Aurelia-Webpack-Plugin 2.0 RC2.

You can review the note that I added in the README for Angular-Bootstrap-Datetimepicker under the main.js and the Global Options configuration.

I also fixed the ASP.Net Client sample which does have the PLATFORM.moduleName() wrapper that is required with aurelia-webpack-plugin 2.0

With all that, I believe it is safe to close this issue, thanks for the feedback and don't forget to upvote :star: if you like the plugin :)