Specify url to module for lazy loading in Angular

Question

I'm using lazy loading modules in Angular like this

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];

The problem is that when serving my application Angular tries to find submodule file by URL /items-items-module.js, while in my project Angular is served from folder /scripts/angular, so built module is located by URL /scripts/angular/items-items-module.js. As a result I'm getting 404 error.

Is there any way to specify path to submodule in this case?

Answer 1

So the solution was to specify deployUrl in angular.json to the folder where the built module is located.

...
"build": {
  ...
  "options": {
    ...
    "outputPath": "..scripts/angular/",
    "deployUrl": "scripts/angular/"
   ...
   }
}