Search code examples
systemjsjspmaurelia

Aurelia exported bundle causes a 404 from SystemJS if a source module was in a subdirectory


I'm learning Aurelia via the TypeScript / ASP.NET Core skeleton navigation app. Everything runs fine in its default state. To test the exported production bundle, I run the Gulp Export task, then publish the app via Visual Studio project publish to a local folder, then replace the published wwwroot folder with the wwwroot folder from within the "export" folder, then use dotnet from the command line to run the app.

Things break if I have any source modules in a subdirectory. For example, I moved the welcome.ts/html component files into "/src/Pages" and adjusted its route moduleId in app.ts accordingly to "./pages/welcome". The unbundled app then still runs up fine, but when I try the exported version, I get a request being made by SystemJS to http://localhost:5000/dist/pages/welcome.js which 404s (as you'd expect).

I can see the contents of the welcome component in the app-build.js file, and the config.js file within the export folder contains the expected file paths, i.e. it has "Pages/welcome...".

I have read this seemingly similar issue:

https://github.com/aurelia/bundler/issues/131

But setting depCache to false made no difference in my case. Why is SystemJS trying to load this module separately from outside of the bundle?


Solution

  • I was able to reproduce this error locally. Presuming that you have a Windows environment, it will be a case-sensitivity issue.

    After renaming [P]ages folder to [p]ages, bundled version works as expected.

    On the filesystem there is a [P]ages/welcome.js viewmodel, but [p]ages/welcome has been defined as moduleId.

    • Unbundled mode: Windows filesystem is case-insensitive, which behaviour can be misleading by loading [P]ages/welcome.js correctly.
    • Bundled mode:
      • Based on file path, bundling process embeds[P]ages/welcome.js as [P]ages/welcome module.
      • But, according to the route config, SystemJS will be looking for [p]ages/welcome module within app-build.js.

    My recommendation would be to use lowercase folder/filenames whenever it's possible.