Multiple app bundles and service registration

Help Requests
21

@BrianPAdams do you setup publicPath: "/dist/", in your webpack config? Coz this is setting the root folder for webpack resources.

I just tried url-loader without any additional configurations and it does prepend the url with dist based on that setting.

22

Yes, that’s how I resolved my external resources not loading issue.

23

If it’s not one thing, it’s another. When all my routes are listed in my main app.ts file all’s well. But when I break the areas down so that I have child routes for each area I’m getting a “Failed loading required CSS file” error for “eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css”.

I have not yet split my code, I’m just trying to get child routes configured to work.

This file is required by aurelia-bootstrap-datetimepicker. My webpack config has Module Dependencies like this:

new ModuleDependenciesPlugin({
    'aurelia-testing': ['./compile-spy', './view-spy'],
    'aurelia-bootstrap-datetimepicker': ['eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min', 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css'],
    'aurelia-autocomplete': [ './component/autocomplete', './component/bootstrap/autocomplete.html' ]
}),

This works fine when all routes are in one app.ts file. But when they are split into child routes, then this error occurs. I can see an entry for “eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css” in my app bundle, it just can’t load it. My guess is it thinks it’s a relative path…

24

@BrianPAdams are you referencing this yourself, such as <require…/> in your views?

25

I do, but I found one page that wasn’t, that seems to have fixed it. Thanks

27

I’d like to thank everyone who helped me out here. I really appreciate it. I now have a solution that works well.

I have a set of shared services and logic that is loaded during app startup. I also have three areas, each with shared code and then modules under them. Each module has specific functionality. The root route table in app.ts has only three routes, one for each area. Each area has a main.ts with a single configureRouter method that registers the routes to each module and then registers any shared services for all modules in the area. Each module in each area has a main.ts with a single configureRouter method that configures each route within the module and the registrations of services which are specific to each module.

I am using WebPack and have PLATFORM.moduleName() calls that register chunks for each area with shared code and then each module within the area. Code is split and is demand loading only the parts of the app that are necessary to serve each route.

I wouldn’t/couldn’t have done it without your help. You guys rock!

3 Likes
28

HI Brian, I’m having similar issues using the CLI WebPack. Is there any chance you can share a basic project to serve as an example?