Intlayer का उपयोग करके अपनी Angular 21 (Vite) वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

विषय-सूची

Intlayer क्या है?

Intlayer एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।

Intlayer के साथ, आप यह कर सकते हैं:

• घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों को आसानी से प्रबंधित करें।
• मेटाडेटा, रूट और सामग्री को गतिशील रूप से स्थानीयकृत करें।
• स्वत: उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें, जिससे स्वतः पूर्णता और त्रुटि का पता लगाना बेहतर होता है।
• गतिशील लोकेल पहचान और स्विचिंग जैसी उन्नत सुविधाओं का लाभ उठाएं।

Angular एप्लिकेशन में Intlayer सेट करने के लिए चरण-दर-चरण मार्गदर्शिका

GitHub पर एप्लिकेशन टेम्पलेट देखें।

चरण 1: निर्भरताएँ स्थापित करें

npm का उपयोग करके आवश्यक पैकेज स्थापित करें:

npm install intlayer angular-intlayernpm install @angular-builders/custom-esbuild --save-devnpx intlayer init

• intlayer

  कोर पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपिलेशन, और CLI कमांड के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।

• angular-intlayer वह पैकेज जो Intlayer को Angular एप्लिकेशन के साथ एकीकृत करता है। यह Angular अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता (context providers) और हुक प्रदान करता है।

• @angular-builders/custom-esbuild Angular CLI के esbuild कॉन्फ़िगरेशन को अनुकूलित करने के लिए आवश्यक है।

चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन

अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // आपकी अन्य भाषाएँ
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्शन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग अक्षम कर सकते हैं, और बहुत कुछ कर सकते हैं। उपलब्ध मापदंडों की पूरी सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।

चरण 3: अपने Angular कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

Intlayer को Angular CLI के साथ एकीकृत करने के लिए, आपको एक कस्टम बिल्डर का उपयोग करने की आवश्यकता है। यह मार्गदर्शिका मानती है कि आप Vite/esbuild का उपयोग कर रहे हैं (Angular 21 परियोजनाओं के लिए डिफ़ॉल्ट)।

सबसे पहले, कस्टम esbuild बिल्डर का उपयोग करने के लिए अपने angular.json को संशोधित करें। build और serve कॉन्फ़िगरेशन अपडेट करें:

{  "projects": {    "your-app-name": {      "architect": {        "build": {          "builder": "@angular-builders/custom-esbuild:application", // replace "@angular/build:application"          "options": {            "define": {              "process.env": "{}",            },            "plugins": ["./esbuild.plugins.ts"],            "browser": "src/main.ts",            // ...          },        },        "serve": {          "builder": "@angular-builders/custom-esbuild:dev-server", // replace "@angular/build:dev-server"          "options": {            "prebundle": {              "exclude": [                "intlayer",                "angular-intlayer",                "@intlayer/config/built",                "@intlayer/core"              ]          },        },      },    },  },}

सुनिश्चित करें कि आप angular.json में your-app-name को अपने प्रोजेक्ट के वास्तविक नाम से बदल दें।

अगला, अपने प्रोजेक्ट के रूट में एक esbuild.plugins.ts फ़ाइल बनाएँ:

import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";export default [intlayerEsbuildPlugin()];

intlayerEsbuildPlugin फ़ंक्शन Intlayer के साथ esbuild को कॉन्फ़िगर करता है। यह सामग्री घोषणा फ़ाइलों को संभालने के लिए प्लगइन इंजेक्ट करता है और इष्टतम प्रदर्शन के लिए कॉन्फ़िगरेशन सेट करता है।

NX उपयोगकर्ता: NX के Angular बिल्डर्स Node के मूल ESM रिज़ॉल्यूशन के माध्यम से प्लगइन फ़ाइलों को लोड करते हैं और तुरंत TypeScript प्लगइन फ़ाइलों को संकलित नहीं करते हैं। इसके बजाय .mjs फ़ाइल का उपयोग करें और तदनुसार angular.json में plugins संदर्भ को अपडेट करें:

esbuild.plugins.mjs

सामग्री कॉपी करें

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";export default [intlayerEsbuildPlugin()];

फिर angular.json में "./esbuild.plugins.ts" के बजाय "./esbuild.plugins.mjs" को इंगित करें।

चरण 4: अपनी सामग्री की घोषणा करें

अनुवाद संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:

आपकी सामग्री घोषणाओं को आपके एप्लिकेशन में कहीं भी परिभाषित किया जा सकता है जब तक कि वे contentDir निर्देशिका (डिफ़ॉल्ट रूप से, ./src) में शामिल हों। और सामग्री घोषणा फ़ाइल एक्सटेंशन (डिफ़ॉल्ट रूप से, .content.{json,ts,tsx,js,jsx,mjs,cjs}) से मेल खाएं।

अधिक जानकारी के लिए, सामग्री घोषणा दस्तावेज़ देखें।

चरण 5: अपने कोड में Intlayer का उपयोग करें

अपने पूरे Angular एप्लिकेशन में Intlayer की अंतर्राष्ट्रीयकरण सुविधाओं का उपयोग करने के लिए, आपको एप्लिकेशन कॉन्फ़िगरेशन में Intlayer प्रदान करने की आवश्यकता है।

import { ApplicationConfig } from "@angular/core";import { provideRouter } from "@angular/router";import { provideIntlayer } from "angular-intlayer";import { routes } from "./app.routes";export const appConfig: ApplicationConfig = {  providers: [    provideRouter(routes),    provideIntlayer(), // यहाँ Intlayer प्रदाता जोड़ें  ],};

फिर, आप किसी भी घटक के भीतर useIntlayer फ़ंक्शन का उपयोग कर सकते हैं।

import { Component } from "@angular/core";import { RouterOutlet } from "@angular/router";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  standalone: true,  imports: [RouterOutlet],  templateUrl: "./app.component.html",  styleUrl: "./app.component.css",})export class AppComponent {  content = useIntlayer("app");}

और आपके टेम्पलेट में:

<div class="content">  <h1>{{ content().title }}</h1>  <p>{{ content().congratulations }}</p></div>

Intlayer सामग्री को एक Signal के रूप में लौटाया जाता है, इसलिए आप सिग्नल को कॉल करके मानों तक पहुँचते हैं: content().title।

(वैकल्पिक) चरण 6: अपनी सामग्री की भाषा बदलें

अपनी सामग्री की भाषा बदलने के लिए, आप useLocale फ़ंक्शन द्वारा प्रदान किए गए setLocale फ़ंक्शन का उपयोग कर सकते हैं। यह आपको एप्लिकेशन के लोकेल को सेट करने और उसके अनुसार सामग्री को अपडेट करने की अनुमति देता है।

भाषाओं के बीच स्विच करने के लिए एक घटक बनाएँ:

import { Component } from "@angular/core";import { CommonModule } from "@angular/common";import { useLocale } from "angular-intlayer";@Component({  selector: "app-locale-switcher",  standalone: true,  imports: [CommonModule],  template: `    <div class="locale-switcher">      <select        [value]="locale()"        (change)="setLocale($any($event.target).value)"      >        @for (loc of availableLocales; track loc) {          <option [value]="loc">{{ loc }}</option>        }      </select>    </div>  `,})export class LocaleSwitcherComponent {  localeCtx = useLocale();  locale = this.localeCtx.locale;  availableLocales = this.localeCtx.availableLocales;  setLocale = this.localeCtx.setLocale;}

फिर, इस घटक का उपयोग अपने app.component.ts में करें:

import { Component } from "@angular/core";import { RouterOutlet } from "@angular/router";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "./locale-switcher.component";@Component({  selector: "app-root",  standalone: true,  imports: [RouterOutlet, LocaleSwitcherComponent],  templateUrl: "./app.component.html",  styleUrl: "./app.component.css",})export class AppComponent {  content = useIntlayer("app");}

TypeScript को कॉन्फ़िगर करें

Intlayer TypeScript के लाभों को प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल संवर्द्धन (Module Augmentation) का उपयोग करता है।

सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वत: उत्पन्न प्रकार शामिल हैं।

{  // ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन  "include": [    // ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन    ".intlayer/**/*.ts", // स्वत: उत्पन्न प्रकार शामिल करें  ],}

Git कॉन्फ़िगरेशन

Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह आपको उन्हें अपने Git रिपॉजिटरी में कमिट करने से बचने की अनुमति देता है।

ऐसा करने के लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:

# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें.intlayer

VS Code एक्सटेंशन

Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code Extension स्थापित कर सकते हैं।

VS Code Marketplace से स्थापित करें

यह एक्सटेंशन प्रदान करता है:

• अनुवाद कुंजियों के लिए स्वत: पूर्णता।
• गुम अनुवादों के लिए रीयल-टाइम त्रुटि पहचान।
• अनुवादित सामग्री का इनलाइन पूर्वावलोकन।
• अनुवादों को आसानी से बनाने और अपडेट करने के लिए त्वरित क्रियाएँ।

एक्सटेंशन का उपयोग करने के तरीके के बारे में अधिक जानकारी के लिए, Intlayer VS Code Extension दस्तावेज़ देखें।

आगे बढ़ें

आगे जाने के लिए, आप विज़ुअल एडिटर को लागू कर सकते हैं या CMS का उपयोग करके अपनी सामग्री को बाहरी रूप दे सकते हैं।