@intlayer/docs 8.10.1 → 8.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/common.cjs +3 -1
- package/dist/cjs/common.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +39 -19
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/common.mjs +3 -1
- package/dist/esm/common.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +39 -19
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/common.d.ts.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +2 -1
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/benchmark/nextjs.md +1 -1
- package/docs/ar/benchmark/solid.md +1 -1
- package/docs/ar/benchmark/svelte.md +1 -1
- package/docs/ar/benchmark/tanstack.md +1 -1
- package/docs/ar/dictionary/markdown.md +4 -7
- package/docs/ar/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/ar/intlayer_with_angular_21.md +412 -0
- package/docs/bn/intlayer_with_angular_21.md +412 -0
- package/docs/cs/intlayer_with_angular_21.md +412 -0
- package/docs/de/benchmark/nextjs.md +1 -1
- package/docs/de/benchmark/solid.md +1 -1
- package/docs/de/benchmark/svelte.md +1 -1
- package/docs/de/benchmark/tanstack.md +1 -1
- package/docs/de/dictionary/markdown.md +4 -7
- package/docs/de/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/de/intlayer_with_angular_21.md +412 -0
- package/docs/en/benchmark/nextjs.md +1 -1
- package/docs/en/benchmark/solid.md +1 -1
- package/docs/en/benchmark/svelte.md +1 -1
- package/docs/en/benchmark/tanstack.md +1 -1
- package/docs/en/dictionary/markdown.md +4 -7
- package/docs/en/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/en/intlayer_with_angular_21.md +412 -0
- package/docs/en-GB/benchmark/nextjs.md +1 -1
- package/docs/en-GB/benchmark/solid.md +1 -1
- package/docs/en-GB/benchmark/svelte.md +1 -1
- package/docs/en-GB/benchmark/tanstack.md +1 -1
- package/docs/en-GB/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/en-GB/intlayer_with_angular_21.md +412 -0
- package/docs/es/benchmark/nextjs.md +1 -1
- package/docs/es/benchmark/solid.md +1 -1
- package/docs/es/benchmark/svelte.md +1 -1
- package/docs/es/benchmark/tanstack.md +1 -1
- package/docs/es/dictionary/markdown.md +4 -7
- package/docs/es/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/es/intlayer_with_angular_21.md +412 -0
- package/docs/fr/benchmark/nextjs.md +1 -1
- package/docs/fr/benchmark/solid.md +1 -1
- package/docs/fr/benchmark/svelte.md +1 -1
- package/docs/fr/benchmark/tanstack.md +1 -1
- package/docs/fr/dictionary/markdown.md +4 -7
- package/docs/fr/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/fr/intlayer_with_angular_21.md +412 -0
- package/docs/hi/benchmark/nextjs.md +1 -1
- package/docs/hi/benchmark/solid.md +1 -1
- package/docs/hi/benchmark/svelte.md +1 -1
- package/docs/hi/benchmark/tanstack.md +1 -1
- package/docs/hi/dictionary/markdown.md +4 -7
- package/docs/hi/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/hi/intlayer_with_angular_21.md +412 -0
- package/docs/id/benchmark/nextjs.md +1 -1
- package/docs/id/benchmark/solid.md +1 -1
- package/docs/id/benchmark/svelte.md +1 -1
- package/docs/id/benchmark/tanstack.md +1 -1
- package/docs/id/dictionary/markdown.md +4 -7
- package/docs/id/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/id/intlayer_with_angular_21.md +412 -0
- package/docs/it/benchmark/nextjs.md +1 -1
- package/docs/it/benchmark/solid.md +1 -1
- package/docs/it/benchmark/svelte.md +1 -1
- package/docs/it/benchmark/tanstack.md +1 -1
- package/docs/it/dictionary/markdown.md +4 -7
- package/docs/it/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/it/intlayer_with_angular_21.md +412 -0
- package/docs/ja/benchmark/nextjs.md +1 -1
- package/docs/ja/benchmark/solid.md +1 -1
- package/docs/ja/benchmark/svelte.md +1 -1
- package/docs/ja/benchmark/tanstack.md +1 -1
- package/docs/ja/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/ja/intlayer_with_angular_21.md +412 -0
- package/docs/ko/benchmark/nextjs.md +1 -1
- package/docs/ko/benchmark/solid.md +1 -1
- package/docs/ko/benchmark/svelte.md +1 -1
- package/docs/ko/benchmark/tanstack.md +1 -1
- package/docs/ko/dictionary/markdown.md +4 -7
- package/docs/ko/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/ko/intlayer_with_angular_21.md +412 -0
- package/docs/nl/intlayer_with_angular_21.md +412 -0
- package/docs/pl/benchmark/nextjs.md +1 -1
- package/docs/pl/benchmark/solid.md +1 -1
- package/docs/pl/benchmark/svelte.md +1 -1
- package/docs/pl/benchmark/tanstack.md +1 -1
- package/docs/pl/dictionary/markdown.md +4 -7
- package/docs/pl/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/pl/intlayer_with_angular_21.md +412 -0
- package/docs/pt/benchmark/nextjs.md +1 -1
- package/docs/pt/benchmark/solid.md +1 -1
- package/docs/pt/benchmark/svelte.md +1 -1
- package/docs/pt/benchmark/tanstack.md +1 -1
- package/docs/pt/dictionary/markdown.md +4 -7
- package/docs/pt/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/pt/intlayer_with_angular_21.md +412 -0
- package/docs/ru/benchmark/nextjs.md +1 -1
- package/docs/ru/benchmark/solid.md +1 -1
- package/docs/ru/benchmark/svelte.md +1 -1
- package/docs/ru/benchmark/tanstack.md +1 -1
- package/docs/ru/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/ru/intlayer_with_angular_21.md +412 -0
- package/docs/tr/benchmark/nextjs.md +1 -1
- package/docs/tr/benchmark/solid.md +1 -1
- package/docs/tr/benchmark/svelte.md +1 -1
- package/docs/tr/benchmark/tanstack.md +1 -1
- package/docs/tr/dictionary/markdown.md +4 -7
- package/docs/tr/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/tr/intlayer_with_angular_21.md +412 -0
- package/docs/uk/benchmark/nextjs.md +1 -1
- package/docs/uk/benchmark/solid.md +1 -1
- package/docs/uk/benchmark/svelte.md +1 -1
- package/docs/uk/benchmark/tanstack.md +1 -1
- package/docs/uk/dictionary/markdown.md +4 -7
- package/docs/uk/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/uk/intlayer_with_angular_21.md +412 -0
- package/docs/ur/intlayer_with_angular_21.md +412 -0
- package/docs/vi/benchmark/nextjs.md +1 -1
- package/docs/vi/benchmark/solid.md +1 -1
- package/docs/vi/benchmark/svelte.md +1 -1
- package/docs/vi/benchmark/tanstack.md +1 -1
- package/docs/vi/dictionary/markdown.md +4 -7
- package/docs/vi/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/vi/intlayer_with_angular_21.md +412 -0
- package/docs/zh/benchmark/nextjs.md +1 -1
- package/docs/zh/benchmark/solid.md +1 -1
- package/docs/zh/benchmark/svelte.md +1 -1
- package/docs/zh/benchmark/tanstack.md +1 -1
- package/docs/zh/dictionary/markdown.md +4 -7
- package/docs/zh/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
- package/docs/zh/intlayer_with_angular_21.md +412 -0
- package/docs/zh-TW/intlayer_with_angular_21.md +412 -0
- package/package.json +6 -6
- package/src/common.ts +12 -6
- package/src/generated/docs.entry.ts +39 -19
|
@@ -0,0 +1,412 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-04-18
|
|
3
|
+
updatedAt: 2026-05-06
|
|
4
|
+
title: Angular i18n - 2026 में Angular 21 ऐप (Vite) का अनुवाद कैसे करें
|
|
5
|
+
description: जानें कि अपनी Angular वेबसाइट को बहुभाषी कैसे बनाएं। इसे अंतर्राष्ट्रीयकरण (i18n) करने और अनुवाद करने के लिए दस्तावेज़ का पालन करें।
|
|
6
|
+
keywords:
|
|
7
|
+
- अंतर्राष्ट्रीयकरण
|
|
8
|
+
- दस्तावेज़ीकरण
|
|
9
|
+
- Intlayer
|
|
10
|
+
- Angular
|
|
11
|
+
- JavaScript
|
|
12
|
+
slugs:
|
|
13
|
+
- doc
|
|
14
|
+
- environment
|
|
15
|
+
- angular
|
|
16
|
+
applicationTemplate: https://github.com/aymericzip/intlayer-angular-21-template
|
|
17
|
+
applicationShowcase: https://intlayer-angular-21-template.vercel.app/
|
|
18
|
+
history:
|
|
19
|
+
- version: 8.9.0
|
|
20
|
+
date: 2026-05-04
|
|
21
|
+
changes: "प्रत्यक्ष संपत्ति पहुँच के लिए Solid useIntlayer API के उपयोग को अपडेट किया गया"
|
|
22
|
+
- version: 8.0.0
|
|
23
|
+
date: 2026-01-26
|
|
24
|
+
changes: "स्थिर संस्करण जारी किया गया"
|
|
25
|
+
- version: 8.0.0
|
|
26
|
+
date: 2025-12-30
|
|
27
|
+
changes: "init कमांड जोड़ा गया"
|
|
28
|
+
- version: 5.5.10
|
|
29
|
+
date: 2025-06-29
|
|
30
|
+
changes: "प्रारंभिक इतिहास"
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
# Intlayer का उपयोग करके अपनी Angular 21 (Vite) वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
|
|
34
|
+
|
|
35
|
+
## विषय-सूची
|
|
36
|
+
|
|
37
|
+
<TOC/>
|
|
38
|
+
|
|
39
|
+
## Intlayer क्या है?
|
|
40
|
+
|
|
41
|
+
**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
|
|
42
|
+
|
|
43
|
+
Intlayer के साथ, आप यह कर सकते हैं:
|
|
44
|
+
|
|
45
|
+
- घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके **अनुवादों को आसानी से प्रबंधित करें**।
|
|
46
|
+
- मेटाडेटा, रूट और सामग्री को **गतिशील रूप से स्थानीयकृत करें**।
|
|
47
|
+
- स्वत: उत्पन्न प्रकारों के साथ **TypeScript समर्थन सुनिश्चित करें**, जिससे स्वतः पूर्णता और त्रुटि का पता लगाना बेहतर होता है।
|
|
48
|
+
- गतिशील लोकेल पहचान और स्विचिंग जैसी **उन्नत सुविधाओं का लाभ उठाएं**।
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## Angular एप्लिकेशन में Intlayer सेट करने के लिए चरण-दर-चरण मार्गदर्शिका
|
|
53
|
+
|
|
54
|
+
<Tabs defaultTab="code">
|
|
55
|
+
<Tab label="Code" value="code">
|
|
56
|
+
|
|
57
|
+
<iframe
|
|
58
|
+
src="https://ide.intlayer.org/aymericzip/intlayer-angular-21-template?file=intlayer.config.ts"
|
|
59
|
+
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
60
|
+
title="Demo CodeSandbox - Intlayer का उपयोग करके अपने एप्लिकेशन का अंतर्राष्ट्रीयकरण कैसे करें"
|
|
61
|
+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
62
|
+
loading="lazy"
|
|
63
|
+
/>
|
|
64
|
+
|
|
65
|
+
</Tab>
|
|
66
|
+
<Tab label="Demo" value="demo">
|
|
67
|
+
|
|
68
|
+
<iframe
|
|
69
|
+
src="https://intlayer-angular-21-template.vercel.app/"
|
|
70
|
+
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
71
|
+
title="Demo - intlayer-angular-template"
|
|
72
|
+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
73
|
+
loading="lazy"
|
|
74
|
+
/>
|
|
75
|
+
|
|
76
|
+
</Tab>
|
|
77
|
+
</Tabs>
|
|
78
|
+
|
|
79
|
+
GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-angular-21-template) देखें।
|
|
80
|
+
|
|
81
|
+
### चरण 1: निर्भरताएँ स्थापित करें
|
|
82
|
+
|
|
83
|
+
npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
|
|
84
|
+
|
|
85
|
+
```bash packageManager="npm"
|
|
86
|
+
npm install intlayer angular-intlayer
|
|
87
|
+
npm install @angular-builders/custom-esbuild --save-dev
|
|
88
|
+
npx intlayer init
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
```bash packageManager="pnpm"
|
|
92
|
+
pnpm add intlayer angular-intlayer
|
|
93
|
+
pnpm add @angular-builders/custom-esbuild --save-dev
|
|
94
|
+
pnpm intlayer init
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
```bash packageManager="yarn"
|
|
98
|
+
yarn add intlayer angular-intlayer
|
|
99
|
+
yarn add @angular-builders/custom-esbuild --save-dev
|
|
100
|
+
yarn intlayer init
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
```bash packageManager="bun"
|
|
104
|
+
bun add intlayer angular-intlayer
|
|
105
|
+
bun add @angular-builders/custom-esbuild --dev
|
|
106
|
+
bun x intlayer init
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
- **intlayer**
|
|
110
|
+
|
|
111
|
+
कोर पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md), ट्रांसपिलेशन, और [CLI कमांड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/cli/index.md) के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।
|
|
112
|
+
|
|
113
|
+
- **angular-intlayer**
|
|
114
|
+
वह पैकेज जो Intlayer को Angular एप्लिकेशन के साथ एकीकृत करता है। यह Angular अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता (context providers) और हुक प्रदान करता है।
|
|
115
|
+
|
|
116
|
+
- **@angular-builders/custom-esbuild**
|
|
117
|
+
Angular CLI के esbuild कॉन्फ़िगरेशन को अनुकूलित करने के लिए आवश्यक है।
|
|
118
|
+
|
|
119
|
+
### चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
|
|
120
|
+
|
|
121
|
+
अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
|
|
122
|
+
|
|
123
|
+
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
124
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
125
|
+
|
|
126
|
+
const config: IntlayerConfig = {
|
|
127
|
+
internationalization: {
|
|
128
|
+
locales: [
|
|
129
|
+
Locales.ENGLISH,
|
|
130
|
+
Locales.FRENCH,
|
|
131
|
+
Locales.SPANISH,
|
|
132
|
+
// आपकी अन्य भाषाएँ
|
|
133
|
+
],
|
|
134
|
+
defaultLocale: Locales.ENGLISH,
|
|
135
|
+
},
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
export default config;
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्शन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग अक्षम कर सकते हैं, और बहुत कुछ कर सकते हैं। उपलब्ध मापदंडों की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
|
|
142
|
+
|
|
143
|
+
### चरण 3: अपने Angular कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
|
|
144
|
+
|
|
145
|
+
Intlayer को Angular CLI के साथ एकीकृत करने के लिए, आपको एक कस्टम बिल्डर का उपयोग करने की आवश्यकता है। यह मार्गदर्शिका मानती है कि आप Vite/esbuild का उपयोग कर रहे हैं (Angular 21 परियोजनाओं के लिए डिफ़ॉल्ट)।
|
|
146
|
+
|
|
147
|
+
सबसे पहले, कस्टम esbuild बिल्डर का उपयोग करने के लिए अपने `angular.json` को संशोधित करें। `build` और `serve` कॉन्फ़िगरेशन अपडेट करें:
|
|
148
|
+
|
|
149
|
+
```json5 fileName="angular.json"
|
|
150
|
+
{
|
|
151
|
+
"projects": {
|
|
152
|
+
"your-app-name": {
|
|
153
|
+
"architect": {
|
|
154
|
+
"build": {
|
|
155
|
+
"builder": "@angular-builders/custom-esbuild:application", // replace "@angular/build:application"
|
|
156
|
+
"options": {
|
|
157
|
+
"define": {
|
|
158
|
+
"process.env": "{}",
|
|
159
|
+
},
|
|
160
|
+
"plugins": ["./esbuild.plugins.ts"],
|
|
161
|
+
"browser": "src/main.ts",
|
|
162
|
+
// ...
|
|
163
|
+
},
|
|
164
|
+
},
|
|
165
|
+
"serve": {
|
|
166
|
+
"builder": "@angular-builders/custom-esbuild:dev-server", // replace "@angular/build:dev-server"
|
|
167
|
+
"options": {
|
|
168
|
+
"prebundle": {
|
|
169
|
+
"exclude": [
|
|
170
|
+
"intlayer",
|
|
171
|
+
"angular-intlayer",
|
|
172
|
+
"@intlayer/config/built",
|
|
173
|
+
"@intlayer/core"
|
|
174
|
+
]
|
|
175
|
+
},
|
|
176
|
+
},
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
},
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
> सुनिश्चित करें कि आप `angular.json` में `your-app-name` को अपने प्रोजेक्ट के वास्तविक नाम से बदल दें।
|
|
184
|
+
|
|
185
|
+
अगला, अपने प्रोजेक्ट के रूट में एक `esbuild.plugins.ts` फ़ाइल बनाएँ:
|
|
186
|
+
|
|
187
|
+
```typescript fileName="esbuild.plugins.ts"
|
|
188
|
+
import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";
|
|
189
|
+
|
|
190
|
+
export default [intlayerEsbuildPlugin()];
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
> `intlayerEsbuildPlugin` फ़ंक्शन Intlayer के साथ esbuild को कॉन्फ़िगर करता है। यह सामग्री घोषणा फ़ाइलों को संभालने के लिए प्लगइन इंजेक्ट करता है और इष्टतम प्रदर्शन के लिए कॉन्फ़िगरेशन सेट करता है।
|
|
194
|
+
|
|
195
|
+
> **NX उपयोगकर्ता**: NX के Angular बिल्डर्स Node के मूल ESM रिज़ॉल्यूशन के माध्यम से प्लगइन फ़ाइलों को लोड करते हैं और तुरंत TypeScript प्लगइन फ़ाइलों को संकलित नहीं करते हैं। इसके बजाय `.mjs` फ़ाइल का उपयोग करें और तदनुसार `angular.json` में `plugins` संदर्भ को अपडेट करें:
|
|
196
|
+
>
|
|
197
|
+
> ```javascript fileName="esbuild.plugins.mjs"
|
|
198
|
+
> import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";
|
|
199
|
+
>
|
|
200
|
+
> export default [intlayerEsbuildPlugin()];
|
|
201
|
+
> ```
|
|
202
|
+
>
|
|
203
|
+
> फिर `angular.json` में `"./esbuild.plugins.ts"` के बजाय `"./esbuild.plugins.mjs"` को इंगित करें।
|
|
204
|
+
|
|
205
|
+
### चरण 4: अपनी सामग्री की घोषणा करें
|
|
206
|
+
|
|
207
|
+
अनुवाद संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:
|
|
208
|
+
|
|
209
|
+
```tsx fileName="src/app/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
|
|
210
|
+
import { t, type Dictionary } from "intlayer";
|
|
211
|
+
|
|
212
|
+
const appContent = {
|
|
213
|
+
key: "app",
|
|
214
|
+
content: {
|
|
215
|
+
title: t({
|
|
216
|
+
en: "Hello",
|
|
217
|
+
fr: "Bonjour",
|
|
218
|
+
es: "Hola",
|
|
219
|
+
}),
|
|
220
|
+
congratulations: t({
|
|
221
|
+
en: "Congratulations! Your app is running. 🎉",
|
|
222
|
+
fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
|
|
223
|
+
es: "¡Felicidades! Tu aplicación está en ejecución. 🎉",
|
|
224
|
+
}),
|
|
225
|
+
exploreDocs: t({
|
|
226
|
+
en: "Explore the Docs",
|
|
227
|
+
fr: "Explorer les Docs",
|
|
228
|
+
es: "Explorar los Docs",
|
|
229
|
+
}),
|
|
230
|
+
learnWithTutorials: t({
|
|
231
|
+
en: "Learn with Tutorials",
|
|
232
|
+
fr: "Apprendre avec les Tutoriels",
|
|
233
|
+
es: "Aprender con los Tutorios",
|
|
234
|
+
}),
|
|
235
|
+
cliDocs: "CLI Docs",
|
|
236
|
+
angularLanguageService: t({
|
|
237
|
+
en: "Angular Language Service",
|
|
238
|
+
fr: "Service de Langage Angular",
|
|
239
|
+
es: "Servicio de Lenguaje Angular",
|
|
240
|
+
}),
|
|
241
|
+
angularDevTools: "Angular DevTools",
|
|
242
|
+
github: "Github",
|
|
243
|
+
twitter: "Twitter",
|
|
244
|
+
youtube: "Youtube",
|
|
245
|
+
},
|
|
246
|
+
} satisfies Dictionary;
|
|
247
|
+
|
|
248
|
+
export default appContent;
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
> आपकी सामग्री घोषणाओं को आपके एप्लिकेशन में कहीं भी परिभाषित किया जा सकता है जब तक कि वे `contentDir` निर्देशिका (डिफ़ॉल्ट रूप से, `./src`) में शामिल हों। और सामग्री घोषणा फ़ाइल एक्सटेंशन (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`) से मेल खाएं।
|
|
252
|
+
|
|
253
|
+
> अधिक जानकारी के लिए, [सामग्री घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
|
|
254
|
+
|
|
255
|
+
### चरण 5: अपने कोड में Intlayer का उपयोग करें
|
|
256
|
+
|
|
257
|
+
अपने पूरे Angular एप्लिकेशन में Intlayer की अंतर्राष्ट्रीयकरण सुविधाओं का उपयोग करने के लिए, आपको एप्लिकेशन कॉन्फ़िगरेशन में Intlayer प्रदान करने की आवश्यकता है।
|
|
258
|
+
|
|
259
|
+
```typescript fileName="src/app/app.config.ts"
|
|
260
|
+
import { ApplicationConfig } from "@angular/core";
|
|
261
|
+
import { provideRouter } from "@angular/router";
|
|
262
|
+
import { provideIntlayer } from "angular-intlayer";
|
|
263
|
+
import { routes } from "./app.routes";
|
|
264
|
+
|
|
265
|
+
export const appConfig: ApplicationConfig = {
|
|
266
|
+
providers: [
|
|
267
|
+
provideRouter(routes),
|
|
268
|
+
provideIntlayer(), // यहाँ Intlayer प्रदाता जोड़ें
|
|
269
|
+
],
|
|
270
|
+
};
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
फिर, आप किसी भी घटक के भीतर `useIntlayer` फ़ंक्शन का उपयोग कर सकते हैं।
|
|
274
|
+
|
|
275
|
+
```typescript fileName="src/app/app.component.ts"
|
|
276
|
+
import { Component } from "@angular/core";
|
|
277
|
+
import { RouterOutlet } from "@angular/router";
|
|
278
|
+
import { useIntlayer } from "angular-intlayer";
|
|
279
|
+
|
|
280
|
+
@Component({
|
|
281
|
+
selector: "app-root",
|
|
282
|
+
standalone: true,
|
|
283
|
+
imports: [RouterOutlet],
|
|
284
|
+
templateUrl: "./app.component.html",
|
|
285
|
+
styleUrl: "./app.component.css",
|
|
286
|
+
})
|
|
287
|
+
export class AppComponent {
|
|
288
|
+
content = useIntlayer("app");
|
|
289
|
+
}
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
और आपके टेम्पलेट में:
|
|
293
|
+
|
|
294
|
+
```html fileName="src/app/app.component.html"
|
|
295
|
+
<div class="content">
|
|
296
|
+
<h1>{{ content().title }}</h1>
|
|
297
|
+
<p>{{ content().congratulations }}</p>
|
|
298
|
+
</div>
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
Intlayer सामग्री को एक `Signal` के रूप में लौटाया जाता है, इसलिए आप सिग्नल को कॉल करके मानों तक पहुँचते हैं: `content().title`।
|
|
302
|
+
|
|
303
|
+
### (वैकल्पिक) चरण 6: अपनी सामग्री की भाषा बदलें
|
|
304
|
+
|
|
305
|
+
अपनी सामग्री की भाषा बदलने के लिए, आप `useLocale` फ़ंक्शन द्वारा प्रदान किए गए `setLocale` फ़ंक्शन का उपयोग कर सकते हैं। यह आपको एप्लिकेशन के लोकेल को सेट करने और उसके अनुसार सामग्री को अपडेट करने की अनुमति देता है।
|
|
306
|
+
|
|
307
|
+
भाषाओं के बीच स्विच करने के लिए एक घटक बनाएँ:
|
|
308
|
+
|
|
309
|
+
```typescript fileName="src/app/locale-switcher.component.ts"
|
|
310
|
+
import { Component } from "@angular/core";
|
|
311
|
+
import { CommonModule } from "@angular/common";
|
|
312
|
+
import { useLocale } from "angular-intlayer";
|
|
313
|
+
|
|
314
|
+
@Component({
|
|
315
|
+
selector: "app-locale-switcher",
|
|
316
|
+
standalone: true,
|
|
317
|
+
imports: [CommonModule],
|
|
318
|
+
template: `
|
|
319
|
+
<div class="locale-switcher">
|
|
320
|
+
<select
|
|
321
|
+
[value]="locale()"
|
|
322
|
+
(change)="setLocale($any($event.target).value)"
|
|
323
|
+
>
|
|
324
|
+
@for (loc of availableLocales; track loc) {
|
|
325
|
+
<option [value]="loc">{{ loc }}</option>
|
|
326
|
+
}
|
|
327
|
+
</select>
|
|
328
|
+
</div>
|
|
329
|
+
`,
|
|
330
|
+
})
|
|
331
|
+
export class LocaleSwitcherComponent {
|
|
332
|
+
localeCtx = useLocale();
|
|
333
|
+
|
|
334
|
+
locale = this.localeCtx.locale;
|
|
335
|
+
availableLocales = this.localeCtx.availableLocales;
|
|
336
|
+
setLocale = this.localeCtx.setLocale;
|
|
337
|
+
}
|
|
338
|
+
```
|
|
339
|
+
|
|
340
|
+
फिर, इस घटक का उपयोग अपने `app.component.ts` में करें:
|
|
341
|
+
|
|
342
|
+
```typescript fileName="src/app/app.component.ts"
|
|
343
|
+
import { Component } from "@angular/core";
|
|
344
|
+
import { RouterOutlet } from "@angular/router";
|
|
345
|
+
import { useIntlayer } from "angular-intlayer";
|
|
346
|
+
import { LocaleSwitcherComponent } from "./locale-switcher.component";
|
|
347
|
+
|
|
348
|
+
@Component({
|
|
349
|
+
selector: "app-root",
|
|
350
|
+
standalone: true,
|
|
351
|
+
imports: [RouterOutlet, LocaleSwitcherComponent],
|
|
352
|
+
templateUrl: "./app.component.html",
|
|
353
|
+
styleUrl: "./app.component.css",
|
|
354
|
+
})
|
|
355
|
+
export class AppComponent {
|
|
356
|
+
content = useIntlayer("app");
|
|
357
|
+
}
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
### TypeScript को कॉन्फ़िगर करें
|
|
361
|
+
|
|
362
|
+
Intlayer TypeScript के लाभों को प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल संवर्द्धन (Module Augmentation) का उपयोग करता है।
|
|
363
|
+
|
|
364
|
+

|
|
365
|
+
|
|
366
|
+

|
|
367
|
+
|
|
368
|
+
सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वत: उत्पन्न प्रकार शामिल हैं।
|
|
369
|
+
|
|
370
|
+
```json5 fileName="tsconfig.json"
|
|
371
|
+
{
|
|
372
|
+
// ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन
|
|
373
|
+
"include": [
|
|
374
|
+
// ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन
|
|
375
|
+
".intlayer/**/*.ts", // स्वत: उत्पन्न प्रकार शामिल करें
|
|
376
|
+
],
|
|
377
|
+
}
|
|
378
|
+
```
|
|
379
|
+
|
|
380
|
+
### Git कॉन्फ़िगरेशन
|
|
381
|
+
|
|
382
|
+
Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह आपको उन्हें अपने Git रिपॉजिटरी में कमिट करने से बचने की अनुमति देता है।
|
|
383
|
+
|
|
384
|
+
ऐसा करने के लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
|
|
385
|
+
|
|
386
|
+
```bash
|
|
387
|
+
# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
|
|
388
|
+
.intlayer
|
|
389
|
+
```
|
|
390
|
+
|
|
391
|
+
### VS Code एक्सटेंशन
|
|
392
|
+
|
|
393
|
+
Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code Extension** स्थापित कर सकते हैं।
|
|
394
|
+
|
|
395
|
+
[VS Code Marketplace से स्थापित करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
396
|
+
|
|
397
|
+
यह एक्सटेंशन प्रदान करता है:
|
|
398
|
+
|
|
399
|
+
- अनुवाद कुंजियों के लिए **स्वत: पूर्णता**।
|
|
400
|
+
- गुम अनुवादों के लिए **रीयल-टाइम त्रुटि पहचान**।
|
|
401
|
+
- अनुवादित सामग्री का **इनलाइन पूर्वावलोकन**।
|
|
402
|
+
- अनुवादों को आसानी से बनाने और अपडेट करने के लिए **त्वरित क्रियाएँ**।
|
|
403
|
+
|
|
404
|
+
एक्सटेंशन का उपयोग करने के तरीके के बारे में अधिक जानकारी के लिए, [Intlayer VS Code Extension दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
|
|
405
|
+
|
|
406
|
+
---
|
|
407
|
+
|
|
408
|
+
### आगे बढ़ें
|
|
409
|
+
|
|
410
|
+
आगे जाने के लिए, आप [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) को लागू कर सकते हैं या [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग करके अपनी सामग्री को बाहरी रूप दे सकते हैं।
|
|
411
|
+
|
|
412
|
+
---
|
|
@@ -165,7 +165,7 @@ Saya menjalankan aplikasi multibahasa yang sama di browser asli untuk setiap sta
|
|
|
165
165
|
|
|
166
166
|
Bintang GitHub adalah indikator kuat dari popularitas proyek, kepercayaan komunitas, dan relevansi jangka panjang. Meskipun bukan ukuran langsung dari kualitas teknis, bintang-bintang tersebut mencerminkan berapa banyak pengembang yang menganggap proyek tersebut berguna, mengikuti kemajuannya, dan kemungkinan akan mengadopsinya. Untuk memperkirakan nilai suatu proyek, bintang membantu membandingkan daya tarik di berbagai alternatif dan memberikan wawasan tentang pertumbuhan ekosistem.
|
|
167
167
|
|
|
168
|
-
[](https://www.star-history.com/#i18next/next-i18next&amannn/next-intl&lingui/js-lingui&vinissimus/next-translate&inostudio/next-international&opral/paraglide-js&tolgee/tolgee-js&aymericzip/intlayer)
|
|
169
169
|
|
|
170
170
|
## Hasil secara terperinci
|
|
171
171
|
|
|
@@ -122,7 +122,7 @@ Kami membandingkan **empat strategi pemuatan**:
|
|
|
122
122
|
|
|
123
123
|
Bintang GitHub adalah indikator kuat dari popularitas proyek, kepercayaan komunitas, dan relevansi jangka panjang. Meskipun bukan ukuran langsung dari kualitas teknis, bintang-bintang tersebut mencerminkan berapa banyak pengembang yang menganggap proyek tersebut berguna, mengikuti kemajuannya, dan kemungkinan akan mengadopsinya. Untuk memperkirakan nilai suatu proyek, bintang membantu membandingkan daya tarik di berbagai alternatif dan memberikan wawasan tentang pertumbuhan ekosistem.
|
|
124
124
|
|
|
125
|
-
[](https://www.star-history.com/#solidjs-community/solid-primitives&mbarzda/solid-i18next&opral/paraglide-js&aymericzip/intlayer)
|
|
126
126
|
|
|
127
127
|
## Hasil secara mendetail
|
|
128
128
|
|
|
@@ -120,7 +120,7 @@ Kami membandingkan **empat strategi pemuatan**:
|
|
|
120
120
|
|
|
121
121
|
Bintang GitHub adalah indikator kuat dari popularitas proyek, kepercayaan komunitas, dan relevansi jangka panjang. Meskipun bukan ukuran langsung dari kualitas teknis, bintang-bintang tersebut mencerminkan berapa banyak pengembang yang menganggap proyek tersebut berguna, mengikuti kemajuannya, dan kemungkinan akan mengadopsinya. Untuk memperkirakan nilai suatu proyek, bintang membantu membandingkan daya tarik di berbagai alternatif dan memberikan wawasan tentang pertumbuhan ekosistem.
|
|
122
122
|
|
|
123
|
-
[](https://www.star-history.com/#kaisermann/svelte-i18n&opral/paraglide-js&aymericzip/intlayer)
|
|
124
124
|
|
|
125
125
|
## Hasil secara mendetail
|
|
126
126
|
|
|
@@ -128,7 +128,7 @@ Kami membandingkan **empat strategi pemuatan**:
|
|
|
128
128
|
|
|
129
129
|
Bintang GitHub adalah indikator kuat dari popularitas proyek, kepercayaan komunitas, dan relevansi jangka panjang. Meskipun bukan ukuran langsung dari kualitas teknis, bintang-bintang tersebut mencerminkan berapa banyak pengembang yang menganggap proyek tersebut berguna, mengikuti kemajuannya, dan kemungkinan akan mengadopsinya. Untuk memperkirakan nilai suatu proyek, bintang membantu membandingkan daya tarik di berbagai alternatif dan memberikan wawasan tentang pertumbuhan ekosistem.
|
|
130
130
|
|
|
131
|
-
[](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&lingui/js-lingui&amannn/next-intl&opral/paraglide-js&tolgee/tolgee-js&aymericzip/intlayer)
|
|
132
132
|
|
|
133
133
|
## Hasil secara terperinci
|
|
134
134
|
|
|
@@ -66,13 +66,10 @@ Anda dapat mendeklarasikan konten Markdown menggunakan fungsi `md` atau cukup se
|
|
|
66
66
|
Contoh struktur file:
|
|
67
67
|
|
|
68
68
|
```text
|
|
69
|
-
content
|
|
70
|
-
├── en
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
│ └── markdown-file.fr.content.md
|
|
74
|
-
└── es/
|
|
75
|
-
└── markdown-file.es.content.md
|
|
69
|
+
content
|
|
70
|
+
├── markdown-file.en.content.md
|
|
71
|
+
├── markdown-file.fr.content.md
|
|
72
|
+
└── markdown-file.es.content.md
|
|
76
73
|
```
|
|
77
74
|
|
|
78
75
|
Anda dapat menambahkan properti apa pun yang didefinisikan dalam [Definisi Kamus](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md) ke dalam front-matter
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-04-18
|
|
3
3
|
updatedAt: 2026-05-06
|
|
4
|
-
title: Angular i18n - Cara menerjemahkan aplikasi Angular di
|
|
4
|
+
title: Angular i18n - Cara menerjemahkan aplikasi Angular 19 (Webpack) di
|
|
5
5
|
description: Temukan cara membuat situs web Angular Anda multibahasa. Ikuti dokumentasi untuk melakukan internasionalisasi (i18n) dan menerjemahkannya.
|
|
6
6
|
keywords:
|
|
7
7
|
- Internasionalisasi
|
|
@@ -13,8 +13,9 @@ slugs:
|
|
|
13
13
|
- doc
|
|
14
14
|
- environment
|
|
15
15
|
- angular
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
- 19
|
|
17
|
+
applicationTemplate: https://github.com/aymericzip/intlayer-angular-19-template
|
|
18
|
+
applicationShowcase: https://intlayer-angular-19-template.vercel.app
|
|
18
19
|
history:
|
|
19
20
|
- version: 8.9.0
|
|
20
21
|
date: 2026-05-04
|
|
@@ -30,7 +31,7 @@ history:
|
|
|
30
31
|
changes: "Inisialisasi riwayat"
|
|
31
32
|
---
|
|
32
33
|
|
|
33
|
-
# Terjemahkan situs web Angular Anda menggunakan Intlayer | Internasionalisasi (i18n)
|
|
34
|
+
# Terjemahkan situs web Angular 19 (Webpack) Anda menggunakan Intlayer | Internasionalisasi (i18n)
|
|
34
35
|
|
|
35
36
|
## Daftar Isi
|
|
36
37
|
|
|
@@ -55,7 +56,7 @@ Dengan Intlayer, Anda dapat:
|
|
|
55
56
|
<Tab label="Code" value="code">
|
|
56
57
|
|
|
57
58
|
<iframe
|
|
58
|
-
src="https://ide.intlayer.org/aymericzip/intlayer-angular-template?file=intlayer.config.ts"
|
|
59
|
+
src="https://ide.intlayer.org/aymericzip/intlayer-angular-19-template?file=intlayer.config.ts"
|
|
59
60
|
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
60
61
|
title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
|
|
61
62
|
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
@@ -66,7 +67,7 @@ Dengan Intlayer, Anda dapat:
|
|
|
66
67
|
<Tab label="Demo" value="demo">
|
|
67
68
|
|
|
68
69
|
<iframe
|
|
69
|
-
src="https://intlayer-angular-template.vercel.app"
|
|
70
|
+
src="https://intlayer-angular-19-template.vercel.app"
|
|
70
71
|
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
71
72
|
title="Demo - intlayer-angular-template"
|
|
72
73
|
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
@@ -76,7 +77,7 @@ Dengan Intlayer, Anda dapat:
|
|
|
76
77
|
</Tab>
|
|
77
78
|
</Tabs>
|
|
78
79
|
|
|
79
|
-
Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-angular-template) di GitHub.
|
|
80
|
+
Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-angular-19-template) di GitHub.
|
|
80
81
|
|
|
81
82
|
### Langkah 1: Instal Dependensi
|
|
82
83
|
|