Tôi đang làm việc với ứng dụng Angular 2 rất đơn giản, và tôi không sử dụng CLI Góc (vì mục đích của câu hỏi cụ thể này, xin vui lòng không đề nghị tôi sử dụng CLI). Khi sử dụng trình biên dịch JIT, trang web chạy mà không có bất kỳ vấn đề nào. Các mô-đun được tải một cách dễ dàng và các mô-đun được nạp lười biếng là hoàn toàn tốt.Góc 2 AOT và tải chậm mà không sử dụng Góc CLI
Tôi có thể chạy trình biên dịch AOT thành công và sau đó sử dụng Rollup để thực hiện lắc cây, như được nêu trong Angular 2 documentation. Khi thực hiện điều này, trang web chạy mà không có bất kỳ vấn đề nào cho các mô-đun được tải háo hức, nhưng tôi gặp lỗi khi cố truy cập vào các mô-đun được tải háo hức. Dưới đây là thông báo lỗi: GET http://atticus.local/app/contacts/contacts.module.ngfactory 404 (Not Found) (có nghĩa là các mô-đun Tôi cố gắng để tải lười biếng)
Một câu hỏi rất cơ bản để bắt đầu:
- Liệu nó thậm chí còn làm cho cảm giác sử dụng tải lười biếng khi bạn đang làm AOT và cây lắc? Bạn vẫn nhận được lợi ích?
Giả sử câu trả lời cho câu hỏi trên là có, tôi tự hỏi làm thế nào tôi có thể có được AOT biên dịch và tải lười làm việc cùng nhau? Tôi đã thấy trên các vấn đề GitHub cho CLI góc mà this question has been raised, and it looks like some solution was put in place. Điều này giả định bạn đang sử dụng CLI, mà tôi không. Tôi đã thông báo trong đầu ra từ khi tôi chạy AOT rằng không có *.ngfactory.ts cũng không phải *.ngsummary.json được tạo cho các mô-đun được tải lười biếng của tôi, nhưng chỉ cho các mô-đun được tải háo hức của tôi. Mà có thể có ý nghĩa?
Để tham khảo, lệnh tôi chạy cho AOT là ngc -p tsconfig-aot.json như sau 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
}
}
Sau đó, tôi chạy rollup -c rollup-config.js cho rollup để thực hiện cây run rẩy. Đây là số 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()
]
}
Vui lòng cho tôi biết nếu tôi có thể cung cấp thêm thông tin hoặc rõ ràng hơn. Cảm ơn bạn!