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

विषय सूची

Intlayer क्या है?

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

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

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

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

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

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

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

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

• intlayer

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

• angular-intlayer वह पैकेज जो Intlayer को Angular एप्लिकेशन के साथ एकीकृत करता है। यह Angular अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक प्रदान करता.
• @angular-builders/custom-webpack Angular CLI के Webpack कॉन्फ़िगरेशन को कस्टमाइज़ करने के लिए आवश्यक है।

चरण 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 को एकीकृत करें

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

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

{  "projects": {    "your-app-name": {      "architect": {        "build": {          "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",          "options": {            "customWebpackConfig": {              "path": "./webpack.config.ts",              "mergeStrategies": { "module.rules": "prepend" },            },            "main": "src/main.ts", // replace "browser": "src/main.ts",            // ...          },        },        "serve": {          "builder": "@angular-builders/custom-webpack:dev-server",        },      },    },  },}

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

इसके बाद, अपने प्रोजेक्ट के रूट में एक webpack.config.ts फ़ाइल बनाएँ:

import { mergeConfig } from "angular-intlayer/webpack";export default mergeConfig({});

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

चरण 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 के लाभ प्राप्त करने और अपने कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।

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

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

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

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

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

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

VS Code एक्सटेंशन

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

VS Code मार्केटप्लेस से स्थापित करें

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

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

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

आगे बढ़ें

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