Cập nhật chỉ mục html góc

Nếu bạn muốn gắn bó với

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
2 tiêu chuẩn trong khi phân phối cục bộ bằng cách muốn có các tệp
app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3 chuyên biệt cho mỗi cấu hình thử nghiệm/sản xuất (như trong trường hợp của tôi, nơi các đoạn mã Google Analytics khác nhau đã được áp dụng), hãy làm điều đó một cách đơn giản

  1. Tạo các thư mục riêng biệt, mỗi thư mục chứa một phiên bản chuyên dụng của
    app.get('/styles.css', (req, res) => {
      // reroute to either styles.ltr or styles.rtl
      if (res.locals.lang === 'ar') {
         res.sendFile(config.rootPath + 'client/styles.rtl.css');
      } else {
         res.sendFile(config.rootPath + 'client/styles.ltr.css');
      }
    });
    3. Ví dụ

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
5
app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
6

  1. Hãy cho
    app.get('/styles.css', (req, res) => {
      // reroute to either styles.ltr or styles.rtl
      if (res.locals.lang === 'ar') {
         res.sendFile(config.rootPath + 'client/styles.rtl.css');
      } else {
         res.sendFile(config.rootPath + 'client/styles.ltr.css');
      }
    });
    7 biết về chúng, theo cấu hình
"configurations": {
    "production": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            }
        ],
        "index": "src/index/prod/index.html",
        // other stuff
    },
    "test": { 
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.test.ts"
            }
        ],
        "index": "src/index/test/index.html",
        // other stuff
    }
    // other stuff
}

Trước đây, chúng tôi đã kết thúc với quan điểm rằng tải lại trang web để thay đổi ngôn ngữ sẽ tốt hơn là thay đổi ở phía khách hàng. Có một vài vấn đề với việc không làm mới

  • Vấn đề trải nghiệm người dùng. Nếu nút thay đổi ngôn ngữ chỉ thay đổi văn bản xuất hiện trên màn hình, thay đổi đó có thể quá khó nhận thấy. Điều này có thể được khắc phục bằng cách tạo ảo giác tải lại
  • Các nguồn lực khác. đôi khi, thay đổi ngôn ngữ đòi hỏi phải thay đổi hướng, kiểu và phông chữ. Giống như từ ngôn ngữ LTR sang ngôn ngữ RTL. Hoặc từ một bảng chữ cái gốc Latinh, sang bảng chữ cái tiếng Nga. Thay đổi phông chữ có nghĩa là tải một phông chữ mới lên trên phông chữ hiện có. Việc thay đổi kiểu rất khó đoán, nó có thể nhấp nháy màn hình không có kiểu trong vài mili giây

Những điều đó có thể không đủ để thuyết phục bạn, trong mọi trường hợp, ngôn ngữ tải lại ứng dụng là rẻ, vì người dùng sẽ không thường xuyên làm điều đó. Hôm nay, chúng tôi sẽ điều chỉnh máy chủ của mình để phục vụ các biểu định kiểu khác nhau dựa trên ngôn ngữ

Mã này có trên StackBlitz

neo RTL so với LTR

Khi tạo các phiên bản bản địa hóa cho các ngôn ngữ RTL, có một số thay đổi nữa cần được thực hiện trên

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3 và vì hiện tại chúng tôi có các công cụ HTML, chúng tôi có thể thay thế nhiều thứ hơn là chỉ
app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
4

thay thế phong cách

Biểu định kiểu theo mặc định được đưa vào Angular. Để máy chủ chọn một biểu định kiểu khác, trước tiên chúng ta phải tắt tính năng tự động nhập biểu định kiểu

// angular.json remove injection
{
"projects": {
  "cr": {
    "architect": {
      "build": {
        "options": {
					// ...
					// bundle up styles and styles.rtl
          "styles": [
              {
                  "input": "src/assets/css/styles.css",
                  "bundleName": "styles.ltr",
                  "inject": false
              },
              {
                  "input": "src/assets/css/styles.rtl.css",
                  "bundleName": "styles.rtl",
                  "inject": false
              }
          ],
          // ...
      },
      "configurations": {
        "production": {
          "optimization": {
            "scripts": true,
						// lets also remove auto inlining of fonts and critical css
            "fonts": false,
            "styles": {
              "inlineCritical": false,
              "minify": true
            }
          },
      // ...
}

Cấu hình tối ưu hóa cho các kiểu, cho phép

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
5. Cái nào sẽ nội tuyến hai
app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
6 được bao gồm, đó không phải là thứ chúng tôi muốn bây giờ, vì vậy chúng tôi tắt nó đi

Trong ứng dụng không dựa trên URL

Trong máy chủ tốc hành của chúng tôi, dòng sau trong tốc độ phải cao hơn mô-đun tĩnh tốc độ

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});

Trong ứng dụng dựa trên URL

// route styles under URL specific language
app.get('/:lang/styles.css', (req, res) => { 
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3 sẽ có một liên kết vững chắc

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
8

Đối với phông chữ, chúng tôi có hai tùy chọn, buồn vui lẫn lộn. Nếu chúng tôi sử dụng các đoạn mã được đề xuất về phông chữ của Google

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
0

1. Nhập trực tiếp URL phông chữ theo kiểu chính

Nếu chúng ta nhập phông chữ trực tiếp vào các kiểu, biểu định kiểu bên ngoài sẽ đợi cho đến khi biểu định kiểu sẵn sàng, làm cho phông chữ có sẵn ít hơn đúng lúc. Vì vậy, hãy thực hiện một giải pháp thay thế và nhập các kiểu trong biểu định kiểu của riêng nó

Cập nhật chỉ mục html góc

2. Nhập trong một biểu định kiểu riêng (phông chữ. css)

Tùy chọn này tốt hơn một chút vì tệp phông chữ sẽ chỉ có một lần nhập và quá trình tải xuống phông chữ sẽ bắt đầu ngay khi biểu định kiểu được tải và phông chữ được yêu cầu

Cập nhật chỉ mục html góc

Hãy tạo một tệp

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
9 mới, thêm vào
// route styles under URL specific language
app.get('/:lang/styles.css', (req, res) => { 
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
0 và viết đường dẫn nhanh cho cả
// route styles under URL specific language
app.get('/:lang/styles.css', (req, res) => { 
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
1

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
4

Thêm nó nguyên trạng vào

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
6

// route styles under URL specific language
app.get('/:lang/styles.css', (req, res) => { 
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3 và
// route styles under URL specific language
app.get('/:lang/styles.css', (req, res) => { 
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
4 mà bạn sẽ tạo trong quá trình phát triển và đưa vào bản dựng chỉ có một câu lệnh nhập duy nhất

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
9

Cuối cùng, các đường dẫn nhanh tương tự như các đường dẫn kiểu

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
0

Đối với SSR, mọi thứ vẫn như vậy, nhưng có một vấn đề nhỏ chúng tôi cần khắc phục trước

Trường hợp tò mò của inlineCriticalCSS trong Angular SSR

Khi triển khai những điều trên và chạy cho ssr, được hiển thị qua

// route styles under URL specific language
app.get('/:lang/styles.css', (req, res) => { 
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
5, quy trình diễn ra như sau

  • động cơ đọc mã
    app.get('/styles.css', (req, res) => {
      // reroute to either styles.ltr or styles.rtl
      if (res.locals.lang === 'ar') {
         res.sendFile(config.rootPath + 'client/styles.rtl.css');
      } else {
         res.sendFile(config.rootPath + 'client/styles.ltr.css');
      }
    });
    3
  • tìm thấy tài liệu tham khảo
    // route styles under URL specific language
    app.get('/:lang/styles.css', (req, res) => { 
      if (res.locals.lang === 'ar') {
         res.sendFile(config.rootPath + 'client/styles.rtl.css');
      } else {
         res.sendFile(config.rootPath + 'client/styles.ltr.css');
      }
    });
    7
  • mở nó ra
  • và nội tuyến CSS quan trọng (sử dụng plugin Critters)

Đó là một lựa chọn tuyệt vời về phía máy chủ, nhưng

// route styles under URL specific language
app.get('/:lang/styles.css', (req, res) => { 
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
7 không tồn tại (cũng không nên có). Vì vậy, chúng ta phải làm mà không có nó. Vấn đề duy nhất là thông báo 404 đáng ghét xuất hiện trong nhật ký máy chủ

Để khắc phục điều đó, sau khi tìm hiểu sâu một chút về các tệp đã biên dịch, css quan trọng nội tuyến trên máy chủ là một tùy chọn không có giấy tờ cho

// route styles under URL specific language
app.get('/:lang/styles.css', (req, res) => { 
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
5

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
6

Trước khi chúng tôi áp dụng tính năng không có giấy tờ (do đó không đáng tin cậy) này và bỏ qua tính năng hay của nội tuyến css quan trọng trên máy chủ, hãy tiếp tục với một tùy chọn khác

Tự tạo lại
app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3 bằng công cụ mẫu của riêng chúng tôi

Hiệu suất của việc liên kết biểu định kiểu phông chữ từ HTML tốt hơn hai tùy chọn trên. Nhưng để làm được điều đó, chúng ta cần phải tạo lại chính

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3

Cập nhật chỉ mục html góc

Trên ứng dụng quy mô nhỏ của tôi, thử nghiệm với mạng chậm, tôi chỉ có thể đưa ra tuyên bố đó vì tôi không thấy sự khác biệt thực sự về hiệu suất

Có một số công cụ HTML tốt ngoài kia, như PUG, tay lái và bộ ria mép, nhưng chúng quá mức cần thiết cho nhu cầu của chúng tôi. Hãy tạo URL hai phông chữ. và vì chúng ta đang ở đó, hãy làm tương tự cho các kiểu

Chúng ta sẽ bắt đầu với điều này trong

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3

// angular.json remove injection
{
"projects": {
  "cr": {
    "architect": {
      "build": {
        "options": {
					// ...
					// bundle up styles and styles.rtl
          "styles": [
              {
                  "input": "src/assets/css/styles.css",
                  "bundleName": "styles.ltr",
                  "inject": false
              },
              {
                  "input": "src/assets/css/styles.rtl.css",
                  "bundleName": "styles.rtl",
                  "inject": false
              }
          ],
          // ...
      },
      "configurations": {
        "production": {
          "optimization": {
            "scripts": true,
						// lets also remove auto inlining of fonts and critical css
            "fonts": false,
            "styles": {
              "inlineCritical": false,
              "minify": true
            }
          },
      // ...
}
0

Nhớ. tất cả quá trình xử lý của chúng tôi đều nằm trên chỉ số sản xuất

Quay lại công cụ HTML nhanh của chúng tôi, hãy tạo một hàm để xử lý việc xử lý

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3

Để đơn giản, vì máy chủ cấp tốc đang hoạt động ngoài tầm kiểm soát, chúng tôi sẽ yêu cầu tệp

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
04 thay vì chuyển nó đi

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
0

Trong các tuyến đường của chúng tôi, chúng tôi có thể sử dụng chức năng này bất cứ khi nào chúng tôi cần. Tìm các chức năng của trình kết xuất được nhóm theo máy chủ/máy chủ/trình kết xuất. js. Để sử dụng các hàm đã xuất, chúng tôi sử dụng các dòng như thế này

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
05

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
06

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
07

Quay lại tối ưu hóa kiểu dáng và phông chữ

Hãy nhớ rằng ở phần đầu của bài viết này, chúng tôi cần phải tắt tính năng tối ưu hóa phông chữ và kiểu Angular để kiểm soát chúng qua các tuyến đường cao tốc. Bây giờ chúng ta đang tạo lại chỉ mục, hãy đưa chúng trở lại. Đầu ra sau khi xây dựng vẫn có các thẻ của chúng tôi và việc tạo lại thông qua trình kết xuất của chúng tôi vẫn hoạt động như mong đợi

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
1

thuộc tính lang

Một lợi ích tốt của việc tái tạo____13 tất cả cùng nhau, là bây giờ chúng ta có thể thực hiện nhiều thay thế hơn nữa. Hãy thay đổi cả thuộc tính ngôn ngữ HTML. Trong chức năng quy trình

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
2

Và trong

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
3 của chúng tôi

app.get('/styles.css', (req, res) => {
  // reroute to either styles.ltr or styles.rtl
  if (res.locals.lang === 'ar') {
     res.sendFile(config.rootPath + 'client/styles.rtl.css');
  } else {
     res.sendFile(config.rootPath + 'client/styles.ltr.css');
  }
});
40

Xây dựng, phục vụ… làm việc. tiếp tục

neoCải tiến và điều chỉnh

Như chúng ta đã biết trước đây, các ký hiệu tiền tệ của một ngôn ngữ là một phần của thư viện được tích hợp sẵn và nếu loại tiền tệ cụ thể đó không được cung cấp, nó sẽ quay trở lại mã của nó. Có cách nào để điều chỉnh hành vi này? . 😴

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

Tùy chỉnh cấu hình Webpack trong ứng dụng góc của bạn . we can use the index transform option to modify the HTML file output, based on the environment.

Chỉ mục html nên chứa gì?

Chỉ mục. trang html là tên phổ biến nhất được sử dụng cho trang mặc định được hiển thị trên trang web nếu không có trang nào khác được chỉ định khi khách truy cập yêu cầu trang web. Nói cách khác, chỉ số. html là tên được sử dụng cho trang chủ của trang web .

Làm thế nào để mở trang html trong góc?

Sau đây là mã từ thành phần góc để nhập html bên ngoài. http. get('nội dung/bao gồm. html', { responseType. 'văn bản' }) .

Chúng tôi có thể thay đổi tên tệp TS chính trong góc không?

Bạn có thể đổi tên bất kỳ tệp hoặc thư mục ts nào trong dự án góc bằng cách nhấp chuột phải vào tệp trong chế độ xem Project Explorer > Refactor > Đổi tên .