Làm cách nào để hiển thị trước các trang trong HTML tĩnh cho ứng dụng Góc?

Question

GÌ: Tôi đang xây dựng một trang web với Angular và tôi muốn triển khai nó trên một máy chủ hoàn toàn tĩnh (như Amazon S3). Tôi cần phải hiển thị trước tất cả các trang HTML cho trang web trước khi triển khai và tôi không chắc chắn cách tiếp tục.

CÁCH: ý tưởng hiện tại của tôi là phải có một số bánh xích đọc một tập tin như sitemap.xml để lấy một danh sách tất cả các URL của trang web, sau đó gửi các yêu cầu đối với các URL đến một máy chủ nơi Node.js được cài đặt và một thể hiện của ứng dụng Angular (Universal) của tôi đang chạy.

CÂU HỎI: Âm thanh có thích hợp để thực hiện không? Tôi có thiếu một bước quan trọng không? Có bất kỳ thư viện hoặc gói npm nào có thể trợ giúp trong tác vụ này không?

Đáng ngạc nhiên, tôi không thể tìm thấy bất kỳ tài liệu nào về kết xuất trước cho Góc (chỉ hiển thị lại). Tôi cũng đã xem xét các trình tạo trang web tĩnh để lấy cảm hứng, nhưng tất cả chúng đều sử dụng một loạt các tệp tĩnh làm điểm bắt đầu của chúng (KHÔNG phải danh sách các URL). Ngoài ra, tôi không muốn sử dụng dịch vụ của bên thứ ba như prerender.io.

Answer 1

Tôi vừa hoàn thành nhiệm vụ tương tự bằng Angular 4. Trang web được lưu trữ bằng các trang Github và không có phần phụ trợ. Hãy sử dụng nó như là ví dụ: repo và cam kết mà thực hiện trước rendering: 0d81d28

tôi phải thực hiện những thay đổi sau đây:

• Tạo mô-đun ứng dụng máy chủ và trình duyệt cập nhật mô-đun ứng dụng như mô tả trong hướng dẫn phổ quát góc
• Triển khai tập lệnh dựng sẵn. Trình kết xuất trước kiểm tra cấu hình bộ định tuyến và truy xuất các tuyến ứng dụng có sẵn.
• Đối với mỗi URL được hiển thị trước, hãy tạo tệp html bằng cách sử dụng renderModuleFactory từ mô-đun @angular/platform-server và lưu html được tạo ở vị trí thích hợp.
• Vì Bhargav đã đề cập đến máy chủ tệp tĩnh sẽ không hỗ trợ bất kỳ URL nào. Vì vậy, nếu bạn cần có URL như /community/overview thì html sẽ được lưu vào /community/overview/index.html. Tham số ma trận góc không hoạt động: (Tôi phải di chuyển các tham số ma trận vào đường dẫn URL, ví dụ:thay vì /docs;doc=overview.html, hãy sử dụng /docs/overview.html
• Để sửa lỗi nhấp nháy phiền toái sau khi tải trang, hãy thêm initialNavigation: 'enabled' vào cấu hình bộ định tuyến: RouterModule.forRoot([{ path: '', ...}], { initialNavigation: 'enabled' }). Tôi vẫn không biết initialNavigation là gì và tại sao nó lại giúp ích.

Hy vọng điều này sẽ hữu ích.

Answer 2

Bạn sẽ cần/muốn một dịch vụ lưu trữ đặc biệt hướng tất cả yêu cầu http đến root index.html. Tệp có tất cả các chân trang đầu trang và tập lệnh Góc hoặc SPA. Nếu không, khi bạn làm mới hoặc đi đến một url khác với 'your-site /' gốc nó sẽ kết thúc cho bạn một lỗi 404 của một số loại. Đây là khóa học chủ yếu là một vấn đề nếu bạn đang sử dụng trạng thái đẩy html5 về cơ bản nếu bộ định tuyến trước của bạn không sử dụng url băm 'your-site/# /' nhưng bạn vẫn có thể chạy ngay cả khi sử dụng băm url. Trừ khi môi trường máy chủ hỗ trợ phục vụ tệp index.html gốc cho tất cả html hoặc không có yêu cầu kết hợp nào.

Có nhiều cách hacky xung quanh vấn đề được mô tả ở trên nhưng tôi chắc chắn không khuyên bạn nên. Về cơ bản, bạn phục vụ cùng một index.html trên các trang 404 của mình một lần nữa nếu dịch vụ môi trường phục vụ của bạn hỗ trợ tính năng này.

Vì vậy, về cơ bản bạn sẽ cần phải thiết lập máy chủ của riêng bạn hoặc sử dụng một dịch vụ như [nhào lộn] [1]

Bạn có thể thay vì sử dụng một khuôn khổ SPA như sử dụng một máy phát điện kiễu góc trang web tĩnh.