Lazy Loading Modules in RouterModule does not work

[Sonik08]

I tried lazy loading modules with in a route object but it seems to not work. I wonder if this is an expected behavior or not ?

To be precise :

const routes: Routes = [
{ path: '', component: Component1Component },
{ path: '2', component: Component2Component },
{ path: '3', loadChildren: () => import("./components/component3/compoenent3.big.module").then(m => m.Component3BigModule)},
];

would not load the corresponding Module producing the following errors in console :
net::ERR_FILE_NOT_FOUND

ChunkLoadError: Loading chunk components-component3-compoenent3-big-module failed.

If the behavior is expected is there any way to fix this or thoughts on adding lazy loaded modules in the future ?

[Sonik08]

To be precise module is searched in path /dist/renderer/index.html/components-component3-compoenent3-big-module.js as is stated in the error I described above.

It seems obvious to me the index.html part is not valid, yet I do not have a clue how to work around this issue

[lsparagino]

To be precise module is searched in path /dist/renderer/index.html/components-component3-compoenent3-big-module.js as is stated in the error I described above.

It seems obvious to me the index.html part is not valid, yet I do not have a clue how to work around this issue

I started porting my angular app to electron just a few hours ago, so I'm not sure if this solution will introduce some other issues. However, I managed to make lazy loading work by changing the renderer build parameters like this:
"build:dev:renderer": "ng build --base-href ./",
"build:prod:renderer": "ng build --base-href ./ --prod"

I hope it helps.

[vinricardo]

@Sonik08

Try like this

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

In the component of this module, don't forget to create a *routing.ts . Something like that:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SiteComponent } from './site.component';

const routes: Routes = [
  {path: '', component: SiteComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SiteRoutingModule { }