Angular lazy loaded module is loaded from wrong url

Question

In Angular I added a new admin module which is lazy loaded when the user visits the admin routes.

{
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule',
}

The module is present in the dist folder but the browser can't resolve the module .js file because it is looking in the wrong place.

The module is build by angular as of the build log:

chunk {admin-admin-module} admin-admin-module.js, admin-admin-module.js.map (admin-admin-module) 293 kB  [rendered]

All build files (main.js, polyfills.js etc.) are stored in a directory named browser so the request URL should be http://localhost:8000/browser/admin-admin-module.js but instead the request URL is http://localhost:8000/admin-admin-module.js. This module file is the only file that is incorrectly loaded.

I can't seem to figure out why it suddenly wants to load this module from the root of the application and not in the location the rest of the *.js files are loaded from.

Answer 1

If you run your app in a local webserver like in your case you have to set the baseHref attribute in your angular.json file to work with a domain sub-path

or

append it to your build command like --base-href=/browser/

Answer 2

For anyone else that lands here in search of a solution to this issue, adding this to the webpack config resolved this issue for me. My setup is an Angular frontend app being served from a django backend with django-webpack-loader employed to load the static files from /static/bundles/. I added the following to my extra-webpack.config.js.

publicPath: "/static/bundles/"

This solution is noted here