Hey, I've got some distribution files for you to check out:
- AOT-enabled dist with Lazy Modules
- No AOT Lazy Modules dist
- AOT without Lazy Modules dist
Here's what's been going on:
- When served locally with webpack-dev-server or live-server, my AOT build with Lazy Loaded modules runs smoothly.
- But as soon as these files are hosted by NGINX, I encounter JavaScript errors in Firefox and Chrome.
- I've experimented with various webpack configurations but the issue persists.
- Notably, I haven't imported any Lazy Loaded modules in my TypeScript files.
- With AOT turned off, everything works seamlessly from NGINX.
- The error "TypeError: '' is not a function" specifically arises when serving Lazy Loaded Modules through NGINX.
I'm utilizing the official Angular package @ngtools/webpack for incorporating AOT compilation into my Angular 5 app. You can find a helpful guide here on using @ngtools/webpack for AOT integration in a Webpack project. Be sure to follow this step to include Lazy Load module file paths in your tsconfig-aot.json, as it's crucial for successful AOT compilation.
All functions flawlessly on localhost with:
npm run serve
During development server deployment, compiled files are stored on disk and served via NGINX.
The issue stems from specific strange errors produced by loaded Lazy modules, such as this in Firefox:
TypeError: i0.\u0275crt is not a function
And this in Chrome:
ERROR TypeError: i0.ɵcrt is not a function
Diving deeper into the Chrome error, here's the source mapping throwing it: https://i.sstatic.net/yFSdH.png
Notice how var i0 is created at this line:
var i0 = __webpack_require(/* @angular/core */ "./node_modules/@angular/core/esm5/core.js");
On the dev server, node_modules reside at the parent level alongside my dist folder: https://i.sstatic.net/jeFWs.png
Here's a glance at my resource files on the dev server:
https://i.sstatic.net/8rZiN.png
Additionally, here's a comparison of resources served up from localhost:
https://i.sstatic.net/mpWGx.png
And those served up from the development server: https://i.sstatic.net/p5edy.png
Now let's delve into my configuration and npm package versions:
webpack.config
// Code snippet
package.json
// Package information
tsconfig-aot.json (files array includes lazy loaded module paths)
// Configuration details
Lastly, here's my NGINX setup:
// NGINX configuration
If needed, take a look at my main.ts and app.module.ts files:
main.ts
// main.ts code
app.module.ts
// app.module.ts code