0

I have been working on angular 7 project and implemented lazy loading of a module as followed in app.route:

  { path: 'privacy-statement',  loadChildren: () => import('./privacy-statement/privacy-statement.module').then(m => m.PrivacyStatementModule) }

It's working fine on normal serve but when I serve the app with --prod and try to access 'privacy-statement', It throws the following error

Error: Runtime compiler is not loaded at n.Ht (main.fd01867a26977f516ab1.js:1) at t.project (main.fd01867a26977f516ab1.js:1) at t._tryNext (main.fd01867a26977f516ab1.js:1) at t._next (main.fd01867a26977f516ab1.js:1) at t.next (main.fd01867a26977f516ab1.js:1) at main.fd01867a26977f516ab1.js:1 at e.invoke (polyfills.a7106ca102d40b2f087a.js:1) at Object.onInvoke (main.fd01867a26977f516ab1.js:1) at e.invoke (polyfills.a7106ca102d40b2f087a.js:1) at t.run (polyfills.a7106ca102d40b2f087a.js:1) at P (polyfills.a7106ca102d40b2f087a.js:1) at P (polyfills.a7106ca102d40b2f087a.js:1) at polyfills.a7106ca102d40b2f087a.js:1 at e.invokeTask (polyfills.a7106ca102d40b2f087a.js:1) at Object.onInvokeTask (main.fd01867a26977f516ab1.js:1) at e.invokeTask (polyfills.a7106ca102d40b2f087a.js:1) at t.runTask (polyfills.a7106ca102d40b2f087a.js:1) at g (polyfills.a7106ca102d40b2f087a.js:1)

I have searched for a solution and found that If I disable AOT (set it to false), It does work. But It increases the serve-time significantly so Is there any other solution that doesn't affect load time?

Rohit Gupta
  • 1,368
  • 1
  • 14
  • 30

2 Answers2

0

To use the import like you did is only possible in AOT if you have ivy enabled. You can do this by adding an option in your tsconfig.json:

"angularCompilerOptions": {
  "enableIvy": true
}

If you do not want to use ivy yet, because it might not be working for your app yet, you have to use the old way of lazy loading:

{ 
  path: 'privacy-statement', 
  loadChildren: 'path/from/src/privacy-statement/privacy-statement.module#PrivacyStatementModule'
},
Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
0

Lazy-loading with import() syntax is available from Angular 8, so either upgrade to 8 or use old syntax with string.

loadChildren: './path/privacy-statement.module#PrivacyStatementModule'
Ludevik
  • 6,954
  • 1
  • 41
  • 59