Intlayer का उपयोग करके अपनी Angular 22 (Vite) वेबसाइट का अनुवाद करें

विषय-सूची

विकल्पों पर इन्टलेयर क्यों?

ngx-translate या angular-l10n जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

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

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

1. 1

   निर्भरताएँ स्थापित करें

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

   bash

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

   कोड कॉपी करें

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

   npx intlayer init --interactive
   

   --interactive ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो intlayer-cli init का उपयोग करें।

   यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:

   bash

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

   कोड कॉपी करें

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

   npm install intlayer angular-intlayer
   npm install @angular-builders/custom-esbuild --save-dev
   

   • intlayer

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

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

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

2. 2

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

   आर्किटेक्चर

   इस आर्किटेक्चर में, angular-intlayer provideIntlayer() प्रदान करता है, जो src/app/app.config.ts में पंजीकृत होता है ताकि प्रत्येक कंपोनेंट useIntlayer सिग्नल के माध्यम से अपनी कंटेंट पढ़ सके। Angular CLI को कस्टम esbuild बिल्डर पर स्विच किया जाता है, और esbuild.plugins.ts आपकी कंटेंट घोषणाओं को देखने और फिर से बनाने के लिए Intlayer प्लगइन को बिल्ड में पंजीकृत करता है। कंटेंट घोषणाएं src/app/ में कंपोनेंट्स के साथ रखी जाती हैं।

   bash

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

   कोड कॉपी करें

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

   .
   ├── src
   │   ├── app
   │   │   ├── app.component.html        # Root template reading the content signal
   │   │   ├── app.component.ts          # Root component using useIntlayer
   │   │   ├── app.config.ts             # Application config with provideIntlayer()
   │   │   ├── app.content.ts            # App content declaration
   │   │   └── locale-switcher.component.ts
   │   └── main.ts
   ├── angular.json                      # Custom esbuild builder for build and serve
   ├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
   ├── intlayer.config.ts
   ├── package.json
   └── tsconfig.json
   

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

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

   intlayer.config.ts

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

   कोड कॉपी करें

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

   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. 3

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

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

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

   angular.json

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

   कोड कॉपी करें

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

   {
     "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 फ़ाइल बनाएँ:

   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. 4

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

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

   src/app/app.content.ts

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

   कोड कॉपी करें

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

   import { t, type Dictionary } from "intlayer";
   
   const appContent = {
     key: "app",
     content: {
       title: t({
         en: "Hello",
         fr: "Bonjour",
         es: "Hola",
       }),
       congratulations: t({
         en: "Congratulations! Your app is running. 🎉",
         fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
         es: "¡Felicidades! Tu aplicación está en ejecución. 🎉",
       }),
       exploreDocs: t({
         en: "Explore the Docs",
         fr: "Explorer les Docs",
         es: "Explorar los Docs",
       }),
       learnWithTutorials: t({
         en: "Learn with Tutorials",
         fr: "Apprendre avec les Tutoriels",
         es: "Aprender con los Tutorios",
       }),
       cliDocs: "CLI Docs",
       angularLanguageService: t({
         en: "Angular Language Service",
         fr: "Service de Langage Angular",
         es: "Servicio de Lenguaje Angular",
       }),
       angularDevTools: "Angular DevTools",
       github: "Github",
       twitter: "Twitter",
       youtube: "Youtube",
     },
   } satisfies Dictionary;
   
   export default appContent;
   

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

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

   सामग्री घोषणा दस्तावेज़
5. 5

   अपने कोड में Intlayer का उपयोग करें

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

   src/app/app.config.ts

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

   कोड कॉपी करें

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

   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 फ़ंक्शन का उपयोग कर सकते हैं।

   src/app/app.component.ts

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

   कोड कॉपी करें

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

   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");
   }
   

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

   src/app/app.component.html

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

   कोड कॉपी करें

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

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

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

6. 6

   अपनी सामग्री की भाषा बदलें

   वैकल्पिक

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

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

   src/app/locale-switcher.component.ts

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

   कोड कॉपी करें

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

   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 में करें:

   src/app/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 स्थापित कर सकते हैं।

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

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

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

आगे बढ़ें

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

अक्सर पूछे जाने वाले प्रश्न