Angular Lazy Loading - Failing in production (meteor 2)

help
1

Hi.

I know not many people still use Angular with Meteor. We’ve been using the angular-meteor for our app. Until now we had no lazy loading whatsoever so I figured I should give it a try.

I managed to make it work eventually but it fails in production.

My route in main module:

{
  path: 'control-panel',
  loadChildren: () => module.dynamicImport('./web/admin/admin.module').then(m => m.AdminModule),
  canActivate: [AuthGuard]
},

My routes in admin module:

const adminChildRoutes: Routes = [
  { path: 'dashboard', component: DashboardPanelComponent },
];

const routes: Routes = [
  {
    path: '',
    component: ControlPanelComponent,
    children: [
      { path: '', redirectTo: 'tasks', pathMatch: 'full' },
      ...adminChildRoutes
    ]
  }
];

For some reason this works when I run the app locally but it fails when I deploy it or run it with --production flag.

Also, if I use import instead of module.dynamicImport, the lazy loading doesn’t work
If I add the dynamic-import meteor package Dynamic Imports | Docs, it doesn’t work as well (no matter the import).

My problem is that when running the app with --production flag, I get

Uncaught Error: Invalid configuration of route 'control-panel'. One of the following must be provided: component, redirectTo, children or loadChildren
    at Xr (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:175:1591)
    at Hr (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:175:74)
    at ii.resetConfig (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:203:8863)
    at new ii (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:203:934)
    at Ei (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:246:1232)
    at By (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:1252:6976)
    at jy (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:1252:6254)
    at Dy (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:1252:5333)
    at new d_ (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:1266:4934)
    at Object.u_ [as createNgModuleRef] (cf4420289c743270de13cfbe02bc477a1f299359.js?meteor_js_resource=true:1266:4750)

I also tried it like this (GitHub - kamilkisiela/meteor-angular-lazy: An example of Lazy Loading Angular's NgModules with Meteor 1.5):

export function loadAdminModule() {
  return import('./web/admin/admin.module').then(({AdminModule}) => AdminModule);
}

{
  path: 'control-panel',
  loadChildren: loadAdminModule,
  canActivate: [AuthGuard]
},

This way, when running locally, the app works but the lazy loading doesn’t work (the modules are eagerly loaded) but when i switch to the --production flag I get this error when I try to go to /control-panel:

 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded

If i switch to module.dynamicImport, locally it starts working again properly, but with --production flag I get the same error.

I found online that you CAN’T use the import statement with commonjs, so I tried to downgrade to use the old string based lazy loading syntax like this:

{
  path: 'control-panel',
  loadChildren: './web/admin/admin.module#AdminModule',
  canActivate: [AuthGuard]
},

But in production I get this error:

Uncaught Error: Cannot find module './imports/app/app.module.ngfactory'

Also, can we please get an update on this? https:// github. com/meteor/meteor/pull/13520 We can’t even upgrade our angular version because of this, the problem is mainly because we are stuck using commonjs basically as far as I’m aware. (link is broken cause forum doesn’t let me put more than 2 links)