Not working with latest bits

[louislewis2]

Hi, I am having an issue when trying to use aurelia-pager with the latest bits. I am using a typescript / webpack setup.

In my main.ts I have the following code

  aurelia.use.plugin(PLATFORM.moduleName('aurelia-bootstrap'));
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-pager'));
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-validation'));
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-api'), config => {

aurelia-api works as expected, as does validation and bootstrap. aurelia-pager gives the following error:

Error: Unable to find module with ID: aurelia-pager/pager Stack trace: Error: Unable to find module with ID: aurelia-pager/pager WebpackLoader.prototype._import/</<@webpack-internal:///196:194:35 step@webpack-internal:///196:43:18 verb/<@webpack-internal:///196:24:53 awaiter</<@webpack-internal:///196:18:15 awaiter<@webpack-internal:///196:14:12 WebpackLoader.prototype._import@webpack-internal:///196:159:16 WebpackLoader.prototype.loadModule/</<@webpack-internal:///196:259:39 step@webpack-internal:///196:43:18 verb/<@webpack-internal:///196:24:53 __awaiter</<@webpack-internal:///196:18:15

[RWOverdijk]

That's strange. And you added it to your resources?

[louislewis2]

I never had to do anything special to get aurelia-api, aurelia-bootstrap or aurelia-validation working. Simply did a npm install xxx --save then add them into the main.ts as shown above and it just works. So I am unaware in the new bits as to what if anything should specially be done to get aurelia-pager up and running?

[louislewis2]

My webpack config file is identical to this one. https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-webpack/webpack.config.js

And as I mentioned above, the other mentioned plugins simply work....

[RWOverdijk]

@louislewis2 Well, that's nice. But not all plugins will just work, especially with Webpack (which I hate). https://github.com/SpoonX/aurelia-pager#webpack

[louislewis2]

Jip out of the lot webpack tends to give me the least amount of grey hairs. :) Based on the link I sent you for the webpack config file, do you have any ideas as to where one would / should add the coreBundles.aurelia? As it for some magical reason does not contain one by default...

[RWOverdijk]

@louislewis2 I'm not sure. I don't use Webpack. Maybe join on Gitter, see if someone else knows? https://gitter.im/SpoonX/Dev

[louislewis2]

This got it working for me

In wepback.config.js

Change

const { AureliaPlugin } = require('aurelia-webpack-plugin');

To

const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');

Then within the plugins section which looks like this currently

plugins: [
    new AureliaPlugin(),
    new ProvidePlugin({
      'Promise': 'bluebird',
      '$': 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery'
    }),

Add a new ModuleDependenciesPlugin so that it looks like this

    new ModuleDependenciesPlugin({
      "aurelia-pager": ['./bootstrap/pager.html', './pager']
    }),

Lastly in your main.ts use the plugin like this

aurelia.use.plugin(PLATFORM.moduleName('aurelia-pager'));

[louislewis2]

@RWOverdijk I am closing this issue as it has been resolved with the code above. I think maybe to update the documentation to reflect this would be useful perhaps?

Thanks for your help too ;)