如何為i18nAngular應用程式重定向資產和頁面URL-有解無憂

我正在將 Angular 11 應用程式國際化。一切正常，ng serve但我在部署時遇到問題，因為我無法解決以下問題：

確保從代碼中參考的資產/assets/picture.png正確加載（即轉換為語言的/xx/assets/picture.png位置xx，例如enor fr）：它們會觸發 404 錯誤。
確保諸如 URL 之類的 URLhttps://example.com/records/12不會觸發錯誤，并且會自動轉換為https://example.com/xx/records/12（這里又xx是諸如enor之類的語言fr）。

該angular.json檔案包含標準內容：

      "i18n": {
        "sourceLocale": "fr",
        "locales": {
          "en": {
            "translation": "src/locale/messages.en.xlf"
          }
        }
      }
...
      "localize": true
...

該應用程式是用 2 種語言構建的ng build --prod --localize，它在 2 中生成 2en和fr子檔案夾dist，然后我將它們部署到服務器的根目錄，緊挨以下.htaccess檔案：

RewriteEngine on
RewriteBase /
RewriteRule ^../index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (..) $1/index.html [L]

RewriteCond %{HTTP:Accept-Language} ^en [NC]
RewriteRule ^$ /en/ [R]

RewriteCond %{HTTP:Accept-Language} !^en [NC]
RewriteRule ^$ /fr/ [R]

（請注意，這fr是源語言和默認語言環境，并且en是翻譯）

我想問題出在.htaccess檔案上，因為那里沒有指定https://example.com/assets/picture.png應該轉換為的內容https://example.com/en/assets/picture.png，對于 Angular 路由的 URL 也是如此。

你能告訴我如何解決這個問題嗎？

注意：通過查看生成網頁的源代碼，我可以驗證它是否包含正確的 href，例如fr：

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/fr/">

uj5u.com熱心網友回復：

請檢查一下，它將幫助您獲得一些想法。

自定義鏈接.pipe.ts

@Pipe({
  name: "toLangHref",
})

// *To Tranform  all Links to multiple Languages Links
export class CustomLinkPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer, private router: Router) {}

  transform(value: any, args?: any): any {
    return this.domSanitizer.bypassSecurityTrustHtml(this.tranformHref(value));
  }

  tranformHref(innerHtml: string): string {
    const langCode = this.getLangCode(this.router.url);
    return innerHtml?.replace(/href='/g, `href='/${langCode}`) || innerHtml;
  }

  getLangCode(path: string): string {
    path =
      path?.charAt(0) === "/" &&
      (path?.charAt(3) === "/" ||
        path?.charAt(3) === "?" ||
        path?.charAt(3) === "")
        ? path?.substring(1, 3)
        : "";

    return path;
  }
}

我如何使用它

"api_section_sub_info_en": "Take your parcel shipping to the next level with our market-leading <a href='/tracking-api'>Tracking API</a> and <a href='/tracking-webhook'>Tracking Webhook</a> solutions, which deliver true end-to-end location and status events in real-time.",
"api_section_sub_info_fr": "Faites passer l'expédition de vos colis au niveau supérieur avec nos solutions <a href='/tracking-api'>API</a> de <a href='/tracking-webhook'>suivi et Webhook de suivi leaders du</a> marché, qui fournissent de véritables événements de localisation et de statut de bout en bout en temps réel.",


 <p
     
     [innerHtml]="lang?.api_section_sub_info | toLangHref"
  ></p>

這是結果

就我而言，我需要用 25 種語言翻譯整個段落，甚至可以翻譯鏈接的標簽。您可以使用此方法為您的影像實作：D。祝你好運！

暗示：

return innerHtml?.replace(/src='/g, `src='/${langCode}`) || innerHtml;

uj5u.com熱心網友回復：

它看起來像以下作品：

RewriteEngine on
RewriteBase /

# keep index.html unchanged
RewriteRule ^(en|fr)/index\.html$ - [L]

# if the URL has no locale prefix, add it (for French)
RewriteCond %{HTTP:Accept-Language} ^fr [NC]
RewriteRule ^(?!(fr|en))(.*)$ fr/$2 [L,DPI]

# same for English
RewriteCond %{HTTP:Accept-Language} ^en [NC]
RewriteRule ^(?!(fr|en))(.*)$ en/$2 [L,DPI]

# at this stage, the URL has a locale prefix
# If the requested resource is not a file/directory, then submit it
# to Angular as a potential route starting with locale 
# => redirect to index.html prefixed with the first 2 letters (= locale)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(..).*$ $1/index.html [L]

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/441231.html

標籤：有角度的 .htaccess 网址国际化

上一篇：HTTP到HTTPS重定向公開子目錄而不是重定向到子域

下一篇：.htaccess根據HTTPS下的路由加載不同的Web應用程式