Угловая 2 AOT и ленивая загрузка без использования Углового CLI

Question

Я работаю с очень простым уклоном 2 приложения, и я не с использованием Угловой CLI (для этого конкретного вопроса, пожалуйста, не предлагайте использовать CLI). При использовании JIT-компилятора сайт работает без каких-либо проблем. Легко загруженные модули и хорошо ленивые модули загружаются полностью.

Я могу успешно запустить компилятор AOT, а затем использовать Rollup для выполнения встряхивания дерева, как указано в Angular 2 documentation. При этом сайт работает без каких-либо проблем для загруженных модулей, но я получаю сообщение об ошибке при попытке перейти к модулям, которые с нетерпением загружены. Вот сообщение об ошибке: GET http://atticus.local/app/contacts/contacts.module.ngfactory 404 (Not Found) (то есть модуль Я пытаюсь ленивой нагрузки)

очень простой вопрос, чтобы начать:

• ли даже имеет смысл использовать отложенную загрузку, когда вы делаете AOT и дрожь дерева? Вы все еще получаете преимущества?

Предполагая, что ответ на вопрос выше, да, мне интересно, как я могу получить компиляцию AOT и ленивую загрузку, работая вместе? Я видел на GitHub вопросы для Угловой CLI, что this question has been raised, and it looks like some solution was put in place. Предполагается, что вы используете CLI, чего я не знаю. Я заметил на выходе, когда я запустил AOT, что не было *.ngfactory.ts или *.ngsummary.json, созданных для моих ленивых загружаемых модулей, но только для моих загруженных модулей. Что, может быть, имеет смысл?

Для справки, команда, которую я баллотировался АОТ является ngc -p tsconfig-aot.json со следующим 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 
    } 
} 

Тогда я побежал rollup -c rollup-config.js для накопительного пакета для выполнения дерева встряхивания. Вот 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() 
    ] 
} 

Пожалуйста, дайте мне знать, если я могу предоставить больше информации или быть более ясным. Спасибо!

Answer 1

rollup еще не поддерживает разделение кода. Here - проблема github для этого.

Вы можете добиться этого с помощью webpack. Он поддерживает разделение кода и ленивую загрузку и Treeshaking.

Имеет ли смысл использовать ленивую загрузку, когда вы делаете AOT и дрожание дерева? Вы все еще получаете преимущества?

Почему нет? Вы по-прежнему уменьшаете время запуска для приложения, поскольку первый модуль должен быть загружен только. Однако вы можете загрузить другие, ленивые, но автоматически с помощью правильной Preloadingstrategy.

BR Fabian