@intlayer/docs 8.10.0 → 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 +340 -14
- package/docs/ar/interest_of_intlayer.md +1 -1
- 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/interest_of_intlayer.md +1 -1
- package/docs/bn/intlayer_with_angular_21.md +412 -0
- package/docs/cs/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/de/interest_of_intlayer.md +1 -1
- 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 +326 -15
- package/docs/en/interest_of_intlayer.md +1 -1
- 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/dictionary/markdown.md +336 -7
- package/docs/en-GB/interest_of_intlayer.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 +340 -14
- package/docs/es/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/fr/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/hi/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/id/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/it/interest_of_intlayer.md +1 -1
- 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/interest_of_intlayer.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 +340 -14
- package/docs/ko/interest_of_intlayer.md +1 -1
- 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/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/pl/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/pt/interest_of_intlayer.md +1 -1
- 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/dictionary/markdown.md +445 -3
- package/docs/ru/interest_of_intlayer.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 +340 -14
- package/docs/tr/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/uk/interest_of_intlayer.md +1 -1
- 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/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/vi/interest_of_intlayer.md +1 -1
- 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 +340 -14
- package/docs/zh/interest_of_intlayer.md +1 -1
- 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/interest_of_intlayer.md +1 -1
- package/docs/zh-TW/intlayer_with_angular_21.md +412 -0
- package/package.json +7 -7
- 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="کوڈ" 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="ڈیمو" 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/ur/dictionary/content_file.md)، ٹرانسپائلیشن، اور [CLI کمانڈز](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/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
|
+
> اس کنفیگریشن فائل کے ذریعے، آپ لوکلائزڈ URLs، مڈل ویئر ری ڈائریکشن، کوکی کے نام، اپنے مواد کے اعلانات کا مقام اور توسیع ترتیب دے سکتے ہیں، کنسول میں Intlayer لاگز کو غیر فعال کر سکتے ہیں، اور بہت کچھ کر سکتے ہیں۔ دستیاب پیرامیٹرز کی مکمل فہرست کے لیے، [کنفیگریشن دستاویزات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/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` فنکشن esbuild کو Intlayer کے ساتھ کنفیگر کرتا ہے۔ یہ مواد کی تعریفی فائلوں کو سنبھالنے کے لیے پلگ ان داخل کرتا ہے اور بہترین کارکردگی کے لیے ترتیب دیتا ہے۔
|
|
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/ur/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 کنفیگریشن میں خود کار طریقے سے تیار کردہ اقسام (autogenerated types) شامل ہیں۔
|
|
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
|
+
- ترجمہ کیز (translation keys) کے لیے **آٹو کمپلیشن**۔
|
|
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/ur/intlayer_visual_editor.md) کو لاگو کر سکتے ہیں یا [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/intlayer_CMS.md) کا استعمال کرتے ہوئے اپنے مواد کو آؤٹ سورس کر سکتے ہیں۔
|
|
411
|
+
|
|
412
|
+
---
|
|
@@ -165,7 +165,7 @@ Tôi đã chạy cùng một ứng dụng đa ngôn ngữ trên trình duyệt t
|
|
|
165
165
|
|
|
166
166
|
Sao GitHub là một chỉ số mạnh mẽ về mức độ phổ biến của dự án, sự tin tưởng của cộng đồng và mức độ phù hợp lâu dài. Mặc dù không phải là thước đo trực tiếp về chất lượng kỹ thuật, chúng phản ánh số lượng nhà phát triển thấy dự án hữu ích, theo dõi tiến trình của nó và có khả năng áp dụng nó. Để ước tính giá trị của một dự án, các ngôi sao giúp so sánh sức hút giữa các lựa chọn thay thế và cung cấp thông tin chi tiết về sự phát triển của hệ sinh thái.
|
|
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
|
## Kết quả chi tiết
|
|
171
171
|
|
|
@@ -122,7 +122,7 @@ Chúng tôi đã so sánh **bốn chiến lược tải**:
|
|
|
122
122
|
|
|
123
123
|
Sao GitHub là một chỉ số mạnh mẽ về mức độ phổ biến của dự án, sự tin tưởng của cộng đồng và mức độ phù hợp lâu dài. Mặc dù không phải là thước đo trực tiếp về chất lượng kỹ thuật, chúng phản ánh số lượng nhà phát triển thấy dự án hữu ích, theo dõi tiến trình của nó và có khả năng áp dụng nó. Để ước tính giá trị của một dự án, các ngôi sao giúp so sánh sức hút giữa các lựa chọn thay thế và cung cấp thông tin chi tiết về sự phát triển của hệ sinh thái.
|
|
124
124
|
|
|
125
|
-
[](https://www.star-history.com/#solidjs-community/solid-primitives&mbarzda/solid-i18next&opral/paraglide-js&aymericzip/intlayer)
|
|
126
126
|
|
|
127
127
|
## Kết quả chi tiết
|
|
128
128
|
|
|
@@ -120,7 +120,7 @@ Chúng tôi đã so sánh **bốn chiến lược tải**:
|
|
|
120
120
|
|
|
121
121
|
Sao GitHub là một chỉ số mạnh mẽ về mức độ phổ biến của dự án, sự tin tưởng của cộng đồng và mức độ phù hợp lâu dài. Mặc dù không phải là thước đo trực tiếp về chất lượng kỹ thuật, chúng phản ánh số lượng nhà phát triển thấy dự án hữu ích, theo dõi tiến trình của nó và có khả năng áp dụng nó. Để ước tính giá trị của một dự án, các ngôi sao giúp so sánh sức hút giữa các lựa chọn thay thế và cung cấp thông tin chi tiết về sự phát triển của hệ sinh thái.
|
|
122
122
|
|
|
123
|
-
[](https://www.star-history.com/#kaisermann/svelte-i18n&opral/paraglide-js&aymericzip/intlayer)
|
|
124
124
|
|
|
125
125
|
## Kết quả chi tiết
|
|
126
126
|
|
|
@@ -128,7 +128,7 @@ Chúng tôi đã so sánh **bốn chiến lược tải**:
|
|
|
128
128
|
|
|
129
129
|
Sao GitHub là một chỉ số mạnh mẽ về mức độ phổ biến của dự án, sự tin tưởng của cộng đồng và mức độ phù hợp lâu dài. Mặc dù không phải là thước đo trực tiếp về chất lượng kỹ thuật, chúng phản ánh số lượng nhà phát triển thấy dự án hữu ích, theo dõi tiến trình của nó và có khả năng áp dụng nó. Để ước tính giá trị của một dự án, các ngôi sao giúp so sánh sức hút giữa các lựa chọn thay thế và cung cấp thông tin chi tiết về sự phát triển của hệ sinh thái.
|
|
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
|
## Kết quả chi tiết
|
|
134
134
|
|