0

I have an angular application where i use lazy loading for one of its module named 'security', i mentioned in routes array of app.routing.module.ts

const routes: Routes = [ 
{path:'path1',component:Path1Component},
    {path:'smotherRoute',component:SmOtherRouteComponent},
{ path: 'security', loadChildren: () => import('./components/security/security.module').then(m => m.SecurityModule) },

]

The folder structure is

src/app/components/security

src/app/components/smotherRoute

src/app/components/...

the security module has routing.modules.ts and module.ts, component.ts, component.html

src/app/components/security/security.component.ts

src/app/components/security/security.component.html

src/app/components/security/security.module.ts

src/app/components/security/security.routing.ts

In security.component.html

  <router-outlet></router-outlet>

The routing module of security is imported in security.module.ts

Imports :[ SecurityRoutingModule,]

The routes for security modules are been mentioned in security.routing.module.ts

const routes: Routes = [{ path: '',  component: SecurityComponent  , children: [
{path: 'child1', component: Child1Component},
{path: 'child2', component: Child2Component}]

when i try to access the app security module through browser, it threw an error like below:

Run time compiler failed to load

or

loading chunk1 or chunk3 failed

However this works using npm run serve /ng serve commands, these errors are seen only when tried to use 'npm run build:single-spa'. ( BTW , i am using single-spa library .)

package.json :

Lisa
  • 655
  • 3
  • 10
  • 34
  • The errors is a bit misleading, but the gist of it is that you can't both import a module and have it lazily loaded at the same time - that's why it fails. If you want to lazily load a module, remove it from the imports. – TotallyNewb Sep 01 '21 at 16:15
  • 1
    i am not importing the module, instead i imported the routing module.ts in its respective module.ts – Lisa Sep 01 '21 at 17:06

1 Answers1

0

There could be many reasons for this issue, in my case the issue is with routing, i have not provided proper routing. In my case, this anuglar app i was using is a micro app, so its been invoked in another app where the routing are mapped . From main container app , i was accessing like http://ip:port/childAPP1/security/child1

since all paths mentioned in this path are considered as children from Main App, i need to provide all the routings of this module as chidren for the micro-app with proper path name app.routing.module.ts of this micro app, that is like ..

app.routing.module.ts

Not sure if this is the main cause or not, but some how this resolved the issue for me, so if ever lazy loading modules threw error 'runtime compiler loading failed' some wrong with the routings being used.

Lisa
  • 655
  • 3
  • 10
  • 34