Chúng ta có thể thay đổi chỉ mục html trong góc không?

Tôi không có bản sao làm sẵn (xin lỗi, điều này quá mới), nhưng tôi đang làm việc với một nhóm người trên loại ứng dụng trình xem kho lưu trữ kiểm soát phiên bản (Git/Subversion) (giống như trình duyệt mã GitHub . Ví dụ: đường dẫn kho lưu trữ của tệp chỉ mục trang web của dự án phiên bản Subversion có thể là /trunk/www/index.html và tuyến ứng dụng Angular để hiển thị nội dung của tệp đó có thể là {{base_href}}/{{project_name}}/view/trunk/www/index.html

Trước tiên, lưu ý rằng tất cả điều này hoạt động như mong đợi đối với hầu hết các mục được tạo phiên bản. Nhưng đối với các đường dẫn thực sự kết thúc bằng chuỗi ký tự index.html, Angular sẽ ăn bit URL vị trí đó và thay vào đó, ứng dụng sẽ hiển thị thư mục mẹ. Bây giờ, từ màn hình thư mục mẹ của ứng dụng của tôi (hiển thị dưới dạng danh sách thư mục với từng thư mục con và tệp được liên kết, như mong đợi), tôi có thể điều hướng thành công vào màn hình của tệp kho lưu trữ index.html. Nhưng nếu tôi làm mới trang, tôi thấy URL Vị trí thay đổi để loại bỏ index.html và ứng dụng của tôi hiển thị lại danh sách thư mục mẹ

Tôi nghi ngờ điều này có thể liên quan đến logic này trong hàm tạo của Vị trí, nhưng thiếu kỹ năng để chứng minh điều đó

this._baseHref = Location.stripTrailingSlash(_stripIndexHtml(browserBaseHref));

hành vi dự kiến

Tôi hy vọng rằng phần index.html của URL vị trí sẽ được giữ nguyên và có sẵn cho bộ định tuyến và các thành phần cần nó

Như bạn đã biết, Angular là một trong những khung JavaScript mạnh nhất để xây dựng các ứng dụng web hiện đại. Với Angular CLI, thật dễ dàng để thiết lập một dự án mới bằng một lệnh, nó bao gồm hầu hết các tùy chọn cho ứng dụng của bạn

Nếu bạn chưa quen với Angular, hãy xem tài liệu chính thức này để biết cách định cấu hình không gian làm việc của bạn. Còn không thì chúng ta đi tiếp vào nội dung chính của chủ đề này đó là cách xử lý một số yêu cầu nâng cao
Ví dụ: cung cấp các giá trị khác nhau của Tiêu đề, mã Trình quản lý thẻ của Google trong chỉ mục. html cho từng môi trường

Về cơ bản, sao chép chỉ mục. html có vẻ là cách đơn giản nhất để làm

Tạo ba tệp chỉ mục

Sao chép nội dung của chỉ mục. html và thay đổi giá trị cho (Tiêu đề ứng dụng, Mã Gtag)

Cấu hình trong góc. tập tin json

Sửa đổi tập lệnh xây dựng trong gói. json

Vâng, nó hoạt động như mong đợi của bạn 😎😎😎😎
Nhưng hãy để tôi tóm tắt một số điểm chưa tốt của giải pháp này

• Sao chép nội dung của chỉ mục. html cho từng môi trường
• Có vẻ như không thực sự tốt khi quản lý cấu hình dự án trong mẫu (HTML) và những nơi khác nhau
• Mất thời gian khi cập nhật/thêm cấu hình…
• Chẳng hạn, không thể truyền dữ liệu động vào mẫu. thêm phiên bản và thời gian phát hành vào thẻ meta để lập chỉ mục. html

Để giải quyết những điều trên, bạn phải thêm nhiều cấu hình tùy chỉnh hơn vào ứng dụng của mình, nhưng LÀM THẾ NÀO 🤔 ?
Hãy quay lại các phiên bản trước Angular CLI có tùy chọn đẩy ra và cho phép bạn sửa đổi Cấu hình Webpack theo ý muốn. Kể từ Angular CLI 6, ng eject không còn được hỗ trợ, thay vào đó, Angular CLI cho phép các kỹ sư có thể tùy chỉnh quy trình xây dựng bằng cách xác định trình tạo của riêng họ. Một số kỹ sư (thợ xây dựng) đã tự làm và đóng góp công việc của họ cho cộng đồng

Trong bài viết này, tôi xin giới thiệu một trình xây dựng tuyệt vời có tên Custom Webpack Builder bao gồm tùy chọn indexTransform, cho phép bạn cung cấp một hàm để chuyển đổi chỉ mục. nội dung html

Đầu tiên, Bạn cần cài đặt gói @angular-builders và sau đó thực hiện các bước sau

1. Xác định Tiêu đề, Trình quản lý thẻ của Google làm biến trong chỉ mục của bạn. html

mục lục. html

2. Khai báo các cấu hình sẽ thay thế các biến ở trên trong thời gian xây dựng

môi trường/môi trường. ts

3. Sử dụng @angular-builders/custom-webpack thay vì @angular-devkit/build-angular. Thêm tùy chọn indexTransform vào trình tạo của bạn

góc cạnh. json

4. Tạo biến đổi chỉ mục. ts tại thư mục gốc cung cấp chức năng thay đổi nội dung của chỉ mục. html
Lưu ý rằng. indexTransform chỉ hỗ trợ TypeScript từ @angular-builders/custom-webpack phiên bản 9. 1. 0-thử nghiệm. 0

chuyển đổi chỉ số. ts

Đó là tất cả những gì bạn cần làm để cập nhật động nội dung chỉ mục của mình. html. Sử dụng custom builder chỉ là gợi ý, bạn hoàn toàn lựa chọn giải pháp phù hợp cho công việc của mình

Lợi ích tuyệt vời khác của trình tạo này là tùy chọn customWebpackConfig nơi bạn có thể thêm cấu hình tùy chỉnh của mình theo yêu cầu, chẳng hạn như hợp nhất JSON để bao gồm nhiều ngôn ngữ (khi sử dụng @ngx-translate), thực hiện các họa tiết hình ảnh CSS, v.v.. Vui lòng kiểm tra tài liệu chính thức để biết

Đó thường là trường hợp chúng tôi cần thay đổi tệp index.html của ứng dụng, dựa trên môi trường. Ví dụ phổ biến nhất là thêm một số tập lệnh phân tích vào môi trường sản xuất của chúng tôi. Trong bài viết này, tôi muốn chỉ cho bạn hai cách khác nhau để làm điều đó bằng cách sử dụng Angular CLI

Đầu tiên, chúng ta hãy xem một cách đơn giản; . Tên tệp trong đường dẫn đã chỉ định được sử dụng làm tên của tệp đã tạo, được tạo trong thư mục gốc của đường dẫn đầu ra được định cấu hình của ứng dụng

Vì vậy, những gì chúng ta có thể làm là tạo một tệp index.html bổ sung cho môi trường sản xuất của mình và sử dụng tệp đó khi xây dựng để sản xuất

Nhược điểm của phương pháp này là chúng ta cần duy trì hai tệp chỉ mục HTML. Trong hầu hết các trường hợp, đây không phải là yếu tố chính vì đây là tệp không thường xuyên thay đổi

Hãy xem xét tùy chọn thứ hai, linh hoạt hơn. Trước tiên, chúng tôi cần kích hoạt sử dụng cấu hình Webpack tùy chỉnh trong dự án của mình, sử dụng thư viện @angular-builders/custom-webpack. Tôi sẽ không đi sâu vào quá trình thực hiện điều đó, vì tôi đã đề cập chi tiết về nó trong bài viết sau

Tùy chỉnh cấu hình Webpack trong ứng dụng góc của bạn

Tùy chỉnh cấu hình Webpack trong ứng dụng góc của bạn

Tùy chỉnh cấu hình Webpack trong ứng dụng góc của bạnnetbasal. com

Lưu ý thêm, đây là cơ hội để bạn đóng góp cho thư viện này và thêm các sơ đồ sẽ tự động tạo toàn bộ cấu hình

Bây giờ chúng tôi đã thêm nó vào dự án của mình, chúng tôi có thể sử dụng tùy chọn để sửa đổi đầu ra tệp HTML, dựa trên môi trường

indexTransform là một đường dẫn (liên quan đến thư mục gốc của không gian làm việc) đến tệp .js hoặc .ts, xuất hàm chuyển đổi cho index.html. Hàm nhận các tùy chọn target và nội dung index.html gốc (được tạo bởi Angular CLI) và trả về một nội dung mới dưới dạng index0 hoặc index1

Trong ví dụ trên, chúng tôi đang sử dụng cheerio để cập nhật HTML và thêm tập lệnh phân tích. Hơn nữa, chúng tôi cũng có cơ hội thu nhỏ tệp HTML của mình. Chúng tôi có thể sử dụng bất kỳ công cụ có sẵn nào, chẳng hạn như ngôn ngữ mẫu, để sửa đổi nội dung HTML

Chúng ta có thể thay đổi tên tệp html chỉ mục trong góc không?

Làm cách nào để thêm chỉ mục html vào góc?