Aurelia webpack

Help Requests
1

I have aurelia configured with webpack. My webpack config has multiple entries, most of which are not aurelia and some that are (… or should be). aurelia-webpack -plugin is defined as:

new AureliaPlugin({
noWebpackLoader: true,
aureliaApp: undefined
}),

The entry then points to a manual bootstrap entry, where I require the PAL loader:

entry: {
aurelia-entry1: [’./some/app’, require.resolve(‘aurelia-webpack-plugin/runtime/pal-loader-entry’)],
otherEntry: ‘some/other/app’,
other…: ‘yet/another/app’
…
};

Finally the bootstrapping looks like this:
import { AuApp } from ‘./AuApp’;
bootstrap(async (aurelia: Aurelia) => {
aurelia.use
.standardConfiguration()
.router();
await aurelia.start();
await aurelia.setRoot(AuApp, document.getElementsByTagName(“BODY”)[0]);
});

I cannot use the PLATFORM.moduleName here, no matter how i define the module (e.g. relative import absolute etc), it cannot resolve. However the normal import works fine.

The problem is, that as soon as I introduce another app, I can no longer get either app to compile. It fails and says I need to use PLATFORM.moduleName, but if I do that, it cannot resolve.
I have tried different things, like having multiple entries in aurelia-webpack-plugin , but its the same thing where its unable to resolve the modules. I cant figure out how this works and why I’m able to load a single app but not multiple. And most importantly I have no idea how to get the multiple entries to load.

1 Like
2

When you do

import { AuApp } from ‘./AuApp’;
bootstrap(async (aurelia: Aurelia) => {
aurelia.use
.standardConfiguration()
.router();
await aurelia.start();
await aurelia.setRoot(AuApp, document.getElementsByTagName(“BODY”)[0]);
});

You are using static resource convention. This probably is you saw something not working. May I see the content of AuApp?

And also, did you mean it cannot work when you do:

await aurelia.setRoot(PLATFORM.moduleName('AuApp'), document.body)

(notice no ./ at the start).

=====

And if you wanna go manual and want to control everything 100%:

import 'aurelia-polyfills';
import { initialize } from 'aurelia-pal-browser';
import { Aurelia } from 'aurelia-framework';

initialize();

(async () => {
  const aurelia = new Aurelia();
  aurelia.use
    .standardConfiguration()
    .developmentLogging()

  await aurelia.start();
  await aurelia.setRoot(PLATFORM.moduleName('AuApp'), document.body);
})();