I am working with a very simple Angular 2 application and I am not using the Angular CLI (for this specific question, please do not suggest that I use the CLI). When using the JIT compiler, the site works without any problems. Lightly loaded modules and well-lazy modules are fully loaded.
I can successfully run the AOT compiler and then use Rollup to perform tree shake, as described in the Angular 2 documentation . At the same time, the site works without any problems for loaded modules, but I get an error message when I try to go to modules that are looking to be loaded. Here is the error message: GET http://atticus.local/app/contacts/contacts.module.ngfactory 404 (Not Found) (i.e. the module I'm trying to use for lazy loading)
A very simple question:
- Does it make sense to use lazy loading when you do AOT and tree shake? Are you still getting benefits?
Assuming the answer to the question above is yes, I wonder how can I get AOT compilation and lazy loading working together? I saw the GitHub problems for the Angular CLI that this question has been raised, and it looks like some kind of solution has been implemented . It is assumed that you are using the CLI, which I do not know. I noticed at the exit, when I launched AOT, that for my lazy loadable modules there were no *.ngfactory.ts and *.ngsummary.json , but only for my loaded modules. What might make sense?
For reference, the command I ran for AOT is ngc -p tsconfig-aot.json with the following tsconfig-aot.json
{ "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "node_modules/@types/" ] }, "files": [ "app/app.module.ts", "app/main-aot.ts" ], "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit": true } }
Then I ran rollup -c rollup-config.js for rollup to do the tree shake. Here is rollup-config.js :
import rollup from 'rollup' import nodeResolve from 'rollup-plugin-node-resolve' import commonjs from 'rollup-plugin-commonjs'; import uglify from 'rollup-plugin-uglify' //paths are relative to the execution path export default { entry: 'app/main-aot.js', dest: 'aot/dist/build.js', // output a single application bundle sourceMap: true, sourceMapFile: 'aot/dist/build.js.map', format: 'iife', plugins: [ nodeResolve({ jsnext: true, module: true }), commonjs({ include: ['node_modules/rxjs/**'] }), uglify() ] }
Please let me know if I can provide more information or be more clear. Thanks!