Router view model from external library

Is it possible to source the moduleId in a route to something external from the project? In my case, from node_modules. These are webpack 4.x projects that I’m working with. My goal is that I want to centralize the use of common routes across the applications so that they don’t have to be maintained separately. Currently we have 4 individually running applications under one domain, and any of those 4 could redirect to a “404” page using config.mapUnknownRoutes. We have a private NPM repository that serves common code to these four applications and I’m trying to figure out how I can share a view/view-model between applications also.

I’m aware of custom elements and we’ve used this solution in the past, but I don’t think that’s 100% appropriate use of that feature in this case.

Thanks all

1 Like

If you need dynamic runtime loading, webpack is not a good choice. You can use requirejs/alameda/systemjs which will load missing module at runtime from remote. You might need to adjust the path of the runtime module, just follow the error message in console to see what path it resolves to. The runtime module path is relative to baseUrl (by default set to “src/”), you might need your runtime module path to be "../node_modules/...".

1 Like

Forgot to say, you can however prepare your common private NPM repo as an Aurelia plugin. Then it’s easier for your app to consume it without any runtime loading trick.

1 Like

Thanks for the reply. We have several private NPM repos today that do just that. I’m just trying to figure out how to serve something in that plugin as a view model in my router.

1 Like
moduleId: PLATFORM.moduleName('npm-package-name/inner/path/to/vm')

This will let webpack to bundle it statically, no need dynamic loading.

1 Like

Simple as that? Cool. I’ll try it as soon as I’m able to. Thanks for the help :slight_smile:

1 Like

Update: It worked! Exactly what I needed. Thanks a lot @huochunpeng

3 Likes