@intlayer/docs 8.10.1 → 8.11.2

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.
Files changed (198) hide show
  1. package/blog/en/i18n_using_next-i18next.md +3 -3
  2. package/blog/en/i18n_using_next-intl.md +3 -3
  3. package/blog/en/list_i18n_technologies/frameworks/angular.md +3 -3
  4. package/blog/en/list_i18n_technologies/frameworks/react-native.md +3 -3
  5. package/blog/en/list_i18n_technologies/frameworks/react.md +3 -3
  6. package/blog/en/list_i18n_technologies/frameworks/svelte.md +3 -3
  7. package/blog/en/list_i18n_technologies/frameworks/vue.md +3 -3
  8. package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +3 -3
  9. package/dist/cjs/common.cjs +3 -1
  10. package/dist/cjs/common.cjs.map +1 -1
  11. package/dist/cjs/generated/blog.entry.cjs +0 -1
  12. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  13. package/dist/cjs/generated/docs.entry.cjs +39 -20
  14. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  15. package/dist/cjs/generated/frequentQuestions.entry.cjs +0 -1
  16. package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
  17. package/dist/cjs/generated/legal.entry.cjs +0 -1
  18. package/dist/cjs/generated/legal.entry.cjs.map +1 -1
  19. package/dist/esm/common.mjs +3 -1
  20. package/dist/esm/common.mjs.map +1 -1
  21. package/dist/esm/generated/docs.entry.mjs +39 -19
  22. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  23. package/dist/types/common.d.ts.map +1 -1
  24. package/dist/types/generated/docs.entry.d.ts +2 -1
  25. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  26. package/docs/ar/benchmark/nextjs.md +1 -1
  27. package/docs/ar/benchmark/solid.md +1 -1
  28. package/docs/ar/benchmark/svelte.md +1 -1
  29. package/docs/ar/benchmark/tanstack.md +1 -1
  30. package/docs/ar/dictionary/markdown.md +165 -7
  31. package/docs/ar/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  32. package/docs/ar/intlayer_with_angular_21.md +412 -0
  33. package/docs/bn/intlayer_with_angular_21.md +412 -0
  34. package/docs/cs/intlayer_with_angular_21.md +412 -0
  35. package/docs/de/benchmark/nextjs.md +1 -1
  36. package/docs/de/benchmark/solid.md +1 -1
  37. package/docs/de/benchmark/svelte.md +1 -1
  38. package/docs/de/benchmark/tanstack.md +1 -1
  39. package/docs/de/dictionary/markdown.md +165 -7
  40. package/docs/de/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  41. package/docs/de/intlayer_with_angular_21.md +412 -0
  42. package/docs/en/benchmark/nextjs.md +1 -1
  43. package/docs/en/benchmark/solid.md +1 -1
  44. package/docs/en/benchmark/svelte.md +1 -1
  45. package/docs/en/benchmark/tanstack.md +1 -1
  46. package/docs/en/dictionary/markdown.md +167 -7
  47. package/docs/en/intlayer_with_adonisjs.md +3 -3
  48. package/docs/en/intlayer_with_analog.md +3 -3
  49. package/docs/en/{intlayer_with_angular.md → intlayer_with_angular_19.md} +10 -9
  50. package/docs/en/intlayer_with_angular_21.md +412 -0
  51. package/docs/en/intlayer_with_astro.md +3 -3
  52. package/docs/en/intlayer_with_astro_lit.md +3 -3
  53. package/docs/en/intlayer_with_astro_preact.md +3 -3
  54. package/docs/en/intlayer_with_astro_react.md +3 -3
  55. package/docs/en/intlayer_with_astro_solid.md +3 -3
  56. package/docs/en/intlayer_with_astro_svelte.md +3 -3
  57. package/docs/en/intlayer_with_astro_vanilla.md +3 -3
  58. package/docs/en/intlayer_with_astro_vue.md +3 -3
  59. package/docs/en/intlayer_with_create_react_app.md +3 -3
  60. package/docs/en/intlayer_with_express.md +3 -3
  61. package/docs/en/intlayer_with_fastify.md +3 -3
  62. package/docs/en/intlayer_with_hono.md +3 -3
  63. package/docs/en/intlayer_with_lynx+react.md +3 -3
  64. package/docs/en/intlayer_with_nestjs.md +3 -3
  65. package/docs/en/intlayer_with_next-i18next.md +3 -3
  66. package/docs/en/intlayer_with_next-intl.md +3 -3
  67. package/docs/en/intlayer_with_nextjs_14.md +3 -3
  68. package/docs/en/intlayer_with_nextjs_15.md +3 -3
  69. package/docs/en/intlayer_with_nextjs_16.md +3 -3
  70. package/docs/en/intlayer_with_nextjs_compiler.md +3 -3
  71. package/docs/en/intlayer_with_nextjs_no_locale_path.md +3 -3
  72. package/docs/en/intlayer_with_nextjs_page_router.md +3 -3
  73. package/docs/en/intlayer_with_nuxt.md +3 -3
  74. package/docs/en/intlayer_with_react_native+expo.md +3 -3
  75. package/docs/en/intlayer_with_react_router_v7.md +3 -3
  76. package/docs/en/intlayer_with_react_router_v7_fs_routes.md +3 -3
  77. package/docs/en/intlayer_with_svelte_kit.md +3 -3
  78. package/docs/en/intlayer_with_tanstack+solid.md +3 -3
  79. package/docs/en/intlayer_with_tanstack.md +3 -3
  80. package/docs/en/intlayer_with_vanilla.md +3 -3
  81. package/docs/en/intlayer_with_vite+lit.md +3 -3
  82. package/docs/en/intlayer_with_vite+preact.md +3 -3
  83. package/docs/en/intlayer_with_vite+react.md +3 -3
  84. package/docs/en/intlayer_with_vite+react_compiler.md +3 -3
  85. package/docs/en/intlayer_with_vite+solid.md +3 -3
  86. package/docs/en/intlayer_with_vite+svelte.md +3 -3
  87. package/docs/en/intlayer_with_vite+vanilla.md +3 -3
  88. package/docs/en/intlayer_with_vite+vue.md +3 -3
  89. package/docs/en-GB/benchmark/nextjs.md +1 -1
  90. package/docs/en-GB/benchmark/solid.md +1 -1
  91. package/docs/en-GB/benchmark/svelte.md +1 -1
  92. package/docs/en-GB/benchmark/tanstack.md +1 -1
  93. package/docs/en-GB/dictionary/markdown.md +161 -0
  94. package/docs/en-GB/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  95. package/docs/en-GB/intlayer_with_angular_21.md +412 -0
  96. package/docs/es/benchmark/nextjs.md +1 -1
  97. package/docs/es/benchmark/solid.md +1 -1
  98. package/docs/es/benchmark/svelte.md +1 -1
  99. package/docs/es/benchmark/tanstack.md +1 -1
  100. package/docs/es/dictionary/markdown.md +165 -7
  101. package/docs/es/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  102. package/docs/es/intlayer_with_angular_21.md +412 -0
  103. package/docs/fr/benchmark/nextjs.md +1 -1
  104. package/docs/fr/benchmark/solid.md +1 -1
  105. package/docs/fr/benchmark/svelte.md +1 -1
  106. package/docs/fr/benchmark/tanstack.md +1 -1
  107. package/docs/fr/dictionary/markdown.md +165 -7
  108. package/docs/fr/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  109. package/docs/fr/intlayer_with_angular_21.md +412 -0
  110. package/docs/hi/benchmark/nextjs.md +1 -1
  111. package/docs/hi/benchmark/solid.md +1 -1
  112. package/docs/hi/benchmark/svelte.md +1 -1
  113. package/docs/hi/benchmark/tanstack.md +1 -1
  114. package/docs/hi/dictionary/markdown.md +165 -7
  115. package/docs/hi/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  116. package/docs/hi/intlayer_with_angular_21.md +412 -0
  117. package/docs/id/benchmark/nextjs.md +1 -1
  118. package/docs/id/benchmark/solid.md +1 -1
  119. package/docs/id/benchmark/svelte.md +1 -1
  120. package/docs/id/benchmark/tanstack.md +1 -1
  121. package/docs/id/dictionary/markdown.md +165 -7
  122. package/docs/id/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  123. package/docs/id/intlayer_with_angular_21.md +412 -0
  124. package/docs/it/benchmark/nextjs.md +1 -1
  125. package/docs/it/benchmark/solid.md +1 -1
  126. package/docs/it/benchmark/svelte.md +1 -1
  127. package/docs/it/benchmark/tanstack.md +1 -1
  128. package/docs/it/dictionary/markdown.md +165 -7
  129. package/docs/it/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  130. package/docs/it/intlayer_with_angular_21.md +412 -0
  131. package/docs/ja/benchmark/nextjs.md +1 -1
  132. package/docs/ja/benchmark/solid.md +1 -1
  133. package/docs/ja/benchmark/svelte.md +1 -1
  134. package/docs/ja/benchmark/tanstack.md +1 -1
  135. package/docs/ja/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  136. package/docs/ja/intlayer_with_angular_21.md +412 -0
  137. package/docs/ko/benchmark/nextjs.md +1 -1
  138. package/docs/ko/benchmark/solid.md +1 -1
  139. package/docs/ko/benchmark/svelte.md +1 -1
  140. package/docs/ko/benchmark/tanstack.md +1 -1
  141. package/docs/ko/dictionary/markdown.md +165 -7
  142. package/docs/ko/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  143. package/docs/ko/intlayer_with_angular_21.md +412 -0
  144. package/docs/nl/intlayer_with_angular_21.md +412 -0
  145. package/docs/pl/benchmark/nextjs.md +1 -1
  146. package/docs/pl/benchmark/solid.md +1 -1
  147. package/docs/pl/benchmark/svelte.md +1 -1
  148. package/docs/pl/benchmark/tanstack.md +1 -1
  149. package/docs/pl/dictionary/markdown.md +165 -7
  150. package/docs/pl/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  151. package/docs/pl/intlayer_with_angular_21.md +412 -0
  152. package/docs/pt/benchmark/nextjs.md +1 -1
  153. package/docs/pt/benchmark/solid.md +1 -1
  154. package/docs/pt/benchmark/svelte.md +1 -1
  155. package/docs/pt/benchmark/tanstack.md +1 -1
  156. package/docs/pt/dictionary/markdown.md +165 -7
  157. package/docs/pt/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  158. package/docs/pt/intlayer_with_angular_21.md +412 -0
  159. package/docs/ru/benchmark/nextjs.md +1 -1
  160. package/docs/ru/benchmark/solid.md +1 -1
  161. package/docs/ru/benchmark/svelte.md +1 -1
  162. package/docs/ru/benchmark/tanstack.md +1 -1
  163. package/docs/ru/dictionary/markdown.md +161 -0
  164. package/docs/ru/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  165. package/docs/ru/intlayer_with_angular_21.md +412 -0
  166. package/docs/tr/benchmark/nextjs.md +1 -1
  167. package/docs/tr/benchmark/solid.md +1 -1
  168. package/docs/tr/benchmark/svelte.md +1 -1
  169. package/docs/tr/benchmark/tanstack.md +1 -1
  170. package/docs/tr/dictionary/markdown.md +165 -7
  171. package/docs/tr/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  172. package/docs/tr/intlayer_with_angular_21.md +412 -0
  173. package/docs/uk/benchmark/nextjs.md +1 -1
  174. package/docs/uk/benchmark/solid.md +1 -1
  175. package/docs/uk/benchmark/svelte.md +1 -1
  176. package/docs/uk/benchmark/tanstack.md +1 -1
  177. package/docs/uk/dictionary/markdown.md +165 -7
  178. package/docs/uk/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  179. package/docs/uk/intlayer_with_angular_21.md +412 -0
  180. package/docs/ur/intlayer_with_angular_21.md +412 -0
  181. package/docs/vi/benchmark/nextjs.md +1 -1
  182. package/docs/vi/benchmark/solid.md +1 -1
  183. package/docs/vi/benchmark/svelte.md +1 -1
  184. package/docs/vi/benchmark/tanstack.md +1 -1
  185. package/docs/vi/dictionary/markdown.md +165 -7
  186. package/docs/vi/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  187. package/docs/vi/intlayer_with_angular_21.md +412 -0
  188. package/docs/zh/benchmark/nextjs.md +1 -1
  189. package/docs/zh/benchmark/solid.md +1 -1
  190. package/docs/zh/benchmark/svelte.md +1 -1
  191. package/docs/zh/benchmark/tanstack.md +1 -1
  192. package/docs/zh/dictionary/markdown.md +165 -7
  193. package/docs/zh/{intlayer_with_angular.md → intlayer_with_angular_19.md} +8 -7
  194. package/docs/zh/intlayer_with_angular_21.md +412 -0
  195. package/docs/zh-TW/intlayer_with_angular_21.md +412 -0
  196. package/package.json +7 -7
  197. package/src/common.ts +12 -6
  198. package/src/generated/docs.entry.ts +39 -19
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  createdAt: 2025-04-18
3
3
  updatedAt: 2026-05-06
4
- title: Angular i18n - Jak przetłumaczyć aplikację Angular w 2026
4
+ title: Angular i18n - Jak przetłumaczyć aplikację Angular 19 (Webpack)
5
5
  description: Dowiedz się, jak uczynić swoją stronę Angular wielojęzyczną. Postępuj zgodnie z dokumentacją, aby ją umiędzynarodowić (i18n) i przetłumaczyć.
6
6
  keywords:
7
7
  - Umiędzynarodowienie
@@ -13,8 +13,9 @@ slugs:
13
13
  - doc
14
14
  - environment
15
15
  - angular
16
- applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
17
- applicationShowcase: https://intlayer-angular-template.vercel.app
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
@@ -27,7 +28,7 @@ history:
27
28
  changes: "Zainicjuj historię"
28
29
  ---
29
30
 
30
- # Przetłumacz swoją stronę Angular za pomocą Intlayer | Umiędzynarodowienie (i18n)
31
+ # Przetłumacz swoją stronę Angular 19 (Webpack) za pomocą Intlayer | Umiędzynarodowienie (i18n)
31
32
 
32
33
  ## Spis treści
33
34
 
@@ -52,7 +53,7 @@ Z Intlayer możesz:
52
53
  <Tab label="Kod" value="code">
53
54
 
54
55
  <iframe
55
- src="https://ide.intlayer.org/aymericzip/intlayer-angular-template?file=intlayer.config.ts"
56
+ src="https://ide.intlayer.org/aymericzip/intlayer-angular-19-template?file=intlayer.config.ts"
56
57
  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
57
58
  title="Demo CodeSandbox - Jak umiędzynarodowić swoją aplikację za pomocą Intlayer"
58
59
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -63,7 +64,7 @@ Z Intlayer możesz:
63
64
  <Tab label="Demo" value="demo">
64
65
 
65
66
  <iframe
66
- src="https://intlayer-angular-template.vercel.app"
67
+ src="https://intlayer-angular-19-template.vercel.app"
67
68
  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
68
69
  title="Demo - intlayer-angular-template"
69
70
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -73,7 +74,7 @@ Z Intlayer możesz:
73
74
  </Tab>
74
75
  </Tabs>
75
76
 
76
- Zobacz [Szablon aplikacji](https://github.com/aymericzip/intlayer-angular-template) na GitHubie.
77
+ Zobacz [Szablon aplikacji](https://github.com/aymericzip/intlayer-angular-19-template) na GitHubie.
77
78
 
78
79
  ### Krok 1: Instalacja zależności
79
80
 
@@ -0,0 +1,412 @@
1
+ ---
2
+ createdAt: 2025-04-18
3
+ updatedAt: 2026-05-06
4
+ title: Angular i18n - Jak przetłumaczyć aplikację Angular 21 (Vite) w 2026 r.
5
+ description: Dowiedz się, jak sprawić, by Twoja strona w Angular była wielojęzyczna. Postępuj zgodnie z dokumentacją, aby ją umiędzynarodowić (i18n) i przetłumaczyć.
6
+ keywords:
7
+ - Umiędzynarodowienie
8
+ - Dokumentacja
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: "Zaktualizowano użycie interfejsu API Solid useIntlayer do bezpośredniego dostępu do właściwości"
22
+ - version: 8.0.0
23
+ date: 2026-01-26
24
+ changes: "Wydanie stabilnej wersji"
25
+ - version: 8.0.0
26
+ date: 2025-12-30
27
+ changes: "Dodano polecenie init"
28
+ - version: 5.5.10
29
+ date: 2025-06-29
30
+ changes: "Historia początkowa"
31
+ ---
32
+
33
+ # Przetłumacz swoją stronę Angular 21 (Vite) za pomocą Intlayer | Umiędzynarodowienie (i18n)
34
+
35
+ ## Spis Treści
36
+
37
+ <TOC/>
38
+
39
+ ## Czym jest Intlayer?
40
+
41
+ **Intlayer** to innowacyjna, darmowa biblioteka umiędzynarodowienia (i18n) zaprojektowana w celu uproszczenia wsparcia wielojęzycznego w nowoczesnych aplikacjach internetowych.
42
+
43
+ Dzięki Intlayer możesz:
44
+
45
+ - **Łatwo zarządzać tłumaczeniami** przy użyciu słowników deklaratywnych na poziomie komponentu.
46
+ - **Dynamicznie lokalizować metadane**, trasy i treść.
47
+ - **Zapewnić wsparcie TypeScript** z autogenerowanymi typami, poprawiającymi autouzupełnianie i wykrywanie błędów.
48
+ - **Korzystać z zaawansowanych funkcji**, takich jak dynamiczne wykrywanie i zmiana języka.
49
+
50
+ ---
51
+
52
+ ## Przewodnik krok po kroku, jak skonfigurować Intlayer w aplikacji Angular
53
+
54
+ <Tabs defaultTab="code">
55
+ <Tab label="Kod" 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 - Jak umiędzynarodowić swoją aplikację za pomocą 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
+ Zobacz [Szablon Aplikacji](https://github.com/aymericzip/intlayer-angular-21-template) na GitHubie.
80
+
81
+ ### Krok 1: Zainstaluj Zależności
82
+
83
+ Zainstaluj niezbędne pakiety używając 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
+ Główny pakiet dostarczający narzędzia i18n do zarządzania konfiguracją, tłumaczenia, [deklarowania treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md), transpilacji oraz [poleceń CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/index.md).
112
+
113
+ - **angular-intlayer**
114
+ Pakiet, który integruje Intlayer z aplikacją Angular. Dostarcza on dostawców kontekstu i hooki do umiędzynarodowienia Angular.
115
+
116
+ - **@angular-builders/custom-esbuild**
117
+ Wymagane do dostosowania konfiguracji esbuild w Angular CLI.
118
+
119
+ ### Krok 2: Konfiguracja twojego projektu
120
+
121
+ Utwórz plik konfiguracyjny, aby skonfigurować języki swojej aplikacji:
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
+ // Twoje inne języki
133
+ ],
134
+ defaultLocale: Locales.ENGLISH,
135
+ },
136
+ };
137
+
138
+ export default config;
139
+ ```
140
+
141
+ > Poprzez ten plik konfiguracyjny możesz ustawić zlokalizowane adresy URL, przekierowania oprogramowania pośredniczącego (middleware), nazwy plików cookie, lokalizację i rozszerzenie deklaracji treści, wyłączyć logi Intlayer w konsoli i wiele więcej. Aby zapoznać się z pełną listą dostępnych parametrów, zapoznaj się z [dokumentacją konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
142
+
143
+ ### Krok 3: Integracja Intlayer w Konfiguracji Angular
144
+
145
+ Aby zintegrować Intlayer z Angular CLI, musisz użyć niestandardowego buildera. Niniejszy przewodnik zakłada, że używasz Vite/esbuild (domyślnego w projektach Angular 21).
146
+
147
+ Najpierw zmodyfikuj plik `angular.json`, aby użyć niestandardowego buildera esbuild. Zaktualizuj konfiguracje `build` i `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
+ > Pamiętaj, aby zastąpić `your-app-name` rzeczywistą nazwą swojego projektu w pliku `angular.json`.
184
+
185
+ Następnie utwórz plik `esbuild.plugins.ts` w głównym katalogu projektu:
186
+
187
+ ```typescript fileName="esbuild.plugins.ts"
188
+ import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";
189
+
190
+ export default [intlayerEsbuildPlugin()];
191
+ ```
192
+
193
+ > Funkcja `intlayerEsbuildPlugin` konfiguruje esbuild dla narzędzia Intlayer. Wprowadza plugin, aby obsłużyć pliki deklaracji treści oraz ustanawia optymalną konfigurację wydajnościową.
194
+
195
+ > **Użytkownicy NX**: Buildery Angular w NX ładują pliki wtyczek poprzez natywne rozpoznawanie ESM w Node i nie kompilują plików wtyczek TypeScript w locie. Użyj zamiast tego pliku `.mjs` i odpowiednio zaktualizuj odniesienie `plugins` w `angular.json`:
196
+ >
197
+ > ```javascript fileName="esbuild.plugins.mjs"
198
+ > import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";
199
+ >
200
+ > export default [intlayerEsbuildPlugin()];
201
+ > ```
202
+ >
203
+ > Następnie w `angular.json` wskaż `"./esbuild.plugins.mjs"` zamiast `"./esbuild.plugins.ts"`.
204
+
205
+ ### Krok 4: Zadeklaruj swoją Treść
206
+
207
+ Twórz i zarządzaj swoimi deklaracjami treści, aby przechowywać tłumaczenia:
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
+ > Twoje deklaracje treści mogą być zdefiniowane w dowolnym miejscu aplikacji, jeśli są dołączone do katalogu `contentDir` (domyślnie `./src`). Zwróć też uwagę na to, by były zgodne z rozszerzeniami plików z deklaracją treści (domyślnie `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
252
+
253
+ > Po więcej szczegółów zapoznaj się z [dokumentacją deklaracji treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md).
254
+
255
+ ### Krok 5: Wykorzystaj Intlayer w Kodzie
256
+
257
+ Aby korzystać z funkcji umiędzynarodowienia w całej aplikacji Angular, musisz dostarczyć Intlayer w konfiguracji swojej aplikacji.
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(), // Dodaj tutaj dostawcę Intlayer
269
+ ],
270
+ };
271
+ ```
272
+
273
+ Następnie możesz użyć funkcji `useIntlayer` w dowolnym komponencie.
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
+ A w twoim szablonie:
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
+ Treść z Intlayer jest zwracana jako `Signal`, więc masz dostęp do jej wartości po wywołaniu sygnału: `content().title`.
302
+
303
+ ### (Opcjonalnie) Krok 6: Zmień język treści
304
+
305
+ Aby zmienić język treści, możesz użyć funkcji `setLocale` udostępnianej przez `useLocale`. Dzięki temu możesz ustawić język aplikacji, a treść zostanie odpowiednio zaktualizowana.
306
+
307
+ Utwórz komponent do przełączania języków:
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
+ Następnie użyj tego komponentu w pliku `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
+ ### Konfiguracja TypeScript
361
+
362
+ Intlayer używa wzbogacania modułów (Module Augmentation), aby zapewnić pełne korzyści z TypeScript i sprawić, by twój kod był bardziej odporny na błędy.
363
+
364
+ ![Autouzupełnianie](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
365
+
366
+ ![Błąd tłumaczenia](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
367
+
368
+ Upewnij się, że twoja konfiguracja TypeScript uwzględnia automatycznie wygenerowane typy.
369
+
370
+ ```json5 fileName="tsconfig.json"
371
+ {
372
+ // ... Twoje istniejące konfiguracje TypeScript
373
+ "include": [
374
+ // ... Twoje istniejące konfiguracje TypeScript
375
+ ".intlayer/**/*.ts", // Dodaj automatycznie wygenerowane typy
376
+ ],
377
+ }
378
+ ```
379
+
380
+ ### Konfiguracja Git
381
+
382
+ Zaleca się ignorowanie plików wygenerowanych przez Intlayer. To zapobiega dodaniu ich do twojego repozytorium Git.
383
+
384
+ Aby to zrobić, możesz dodać następujące polecenia do swojego pliku `.gitignore`:
385
+
386
+ ```bash
387
+ # Ignoruj pliki wygenerowane przez Intlayer
388
+ .intlayer
389
+ ```
390
+
391
+ ### Rozszerzenie do VS Code
392
+
393
+ Aby poprawić jakość i szybkość pisania kodu z Intlayer, możesz zainstalować oficjalne **Rozszerzenie Intlayer VS Code**.
394
+
395
+ [Zainstaluj z Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
396
+
397
+ Rozszerzenie to zapewnia:
398
+
399
+ - **Autouzupełnianie** kluczy tłumaczeń.
400
+ - **Wykrywanie błędów w czasie rzeczywistym** dla brakujących tłumaczeń.
401
+ - **Wbudowane podglądy** przetłumaczonych treści.
402
+ - **Szybkie akcje**, by sprawnie stworzyć nowe i zaktualizować istniejące tłumaczenia.
403
+
404
+ Więcej informacji na temat korzystania z rozszerzenia można znaleźć w [Dokumentacji Rozszerzenia Intlayer dla VS Code](https://intlayer.org/doc/vs-code-extension).
405
+
406
+ ---
407
+
408
+ ### Idź Dalej
409
+
410
+ By osiągnąć jeszcze więcej, możesz zaimplementować [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) lub uzewnętrznić swoje treści przy pomocy [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md).
411
+
412
+ ---
@@ -165,7 +165,7 @@ Executei a mesma aplicação multilíngue em um navegador real para cada stack e
165
165
 
166
166
  As estrelas do GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, elas refletem quantos desenvolvedores consideram o projeto útil, acompanham seu progresso e têm probabilidade de adotá-lo. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre as alternativas e fornecem insights sobre o crescimento do ecossistema.
167
167
 
168
- [![Star History Chart](https://api.star-history.com/chart?repos=i18next%2Fnext-i18next%2Camannn%2Fnext-intl%2Clingui%2Fjs-lingui%2Cvinissimus%2Fnext-translate%2Cinostudio%2Fnext-international%2Copral%2paraglide-js%2Ctolgee%2Ftolgee-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](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)
168
+ [![Star History Chart](https://api.star-history.com/chart?repos=i18next%2Fnext-i18next%2Camannn%2Fnext-intl%2Clingui%2Fjs-lingui%2Cvinissimus%2Fnext-translate%2Cinostudio%2Fnext-international%2Copral%2Fparaglide-js%2Ctolgee%2Ftolgee-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](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
  ## Resultados em detalhe
171
171
 
@@ -122,7 +122,7 @@ Comparamos **quatro estratégias de carregamento**:
122
122
 
123
123
  As estrelas do GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, elas refletem quantos desenvolvedores consideram o projeto útil, acompanham seu progresso e têm probabilidade de adotá-lo. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre as alternativas e fornecem insights sobre o crescimento do ecossistema.
124
124
 
125
- [![Star History Chart](https://api.star-history.com/chart?repos=solidjs-community%2Fsolid-primitives%2Cmbarzda%2Fsolid-i18next%2Copral%2paraglide-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#solidjs-community/solid-primitives&mbarzda/solid-i18next&opral/paraglide-js&aymericzip/intlayer&codingcommons/typesafe-i18n)
125
+ [![Star History Chart](https://api.star-history.com/chart?repos=solidjs-community%2Fsolid-primitives%2Cmbarzda%2Fsolid-i18next%2Copral%2Fparaglide-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#solidjs-community/solid-primitives&mbarzda/solid-i18next&opral/paraglide-js&aymericzip/intlayer&codingcommons/typesafe-i18n)
126
126
 
127
127
  ## Resultados em detalhes
128
128
 
@@ -120,7 +120,7 @@ Comparamos **quatro estratégias de carregamento**:
120
120
 
121
121
  As estrelas do GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, elas refletem quantos desenvolvedores consideram o projeto útil, acompanham seu progresso e têm probabilidade de adotá-lo. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre as alternativas e fornecem insights sobre o crescimento do ecossistema.
122
122
 
123
- [![Star History Chart](https://api.star-history.com/chart?repos=kaisermann%2Fsvelte-i18n%2Copral%2paraglide-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#kaisermann/svelte-i18n&opral/paraglide-js&aymericzip/intlayer&codingcommons/typesafe-i18n)
123
+ [![Star History Chart](https://api.star-history.com/chart?repos=kaisermann%2Fsvelte-i18n%2Copral%2Fparaglide-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#kaisermann/svelte-i18n&opral/paraglide-js&aymericzip/intlayer&codingcommons/typesafe-i18n)
124
124
 
125
125
  ## Resultados em detalhes
126
126
 
@@ -128,7 +128,7 @@ Comparamos **quatro estratégias de carregamento**:
128
128
 
129
129
  As estrelas do GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, elas refletem quantos desenvolvedores consideram o projeto útil, acompanham seu progresso e têm probabilidade de adotá-lo. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre as alternativas e fornecem insights sobre o crescimento do ecossistema.
130
130
 
131
- [![Star History Chart](https://api.star-history.com/chart?repos=formatjs%2Fformatjs%2Ci18next%2Freact-i18next%2Clingui%2Fjs-lingui%2Camannn%2Fnext-intl%2Copral%2paraglide-js%2Ctolgee%2Ftolgee-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&lingui/js-lingui&amannn/next-intl&opral/paraglide-js&tolgee/tolgee-js&aymericzip/intlayer)
131
+ [![Star History Chart](https://api.star-history.com/chart?repos=formatjs%2Fformatjs%2Ci18next%2Freact-i18next%2Clingui%2Fjs-lingui%2Camannn%2Fnext-intl%2Copral%2Fparaglide-js%2Ctolgee%2Ftolgee-js%2Caymericzip%2Fintlayer&type=date&legend=top-left)](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
  ## Resultados em detalhe
134
134