Angular Academy · Lekcja

Budowanie zlokalizowanych pakietów

Tworzyć kompilacje aplikacji dla poszczególnych lokalizacji

Budowanie zlokalizowanych pakietów to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Osobna kompilacja dla każdej lokalizacji

System i18n Angulara działa podczas kompilacji: tworzy osobny, w pełni zoptymalizowany bundle dla każdej lokalizacji, z wbudowanymi tłumaczeniami. Użytkownicy pobierają tylko swój język, bez kosztu tłumaczenia w czasie działania.

Konfigurowanie zlokalizowanych kompilacji

Po zadeklarowaniu lokalizacji w angular.json ustaw localize: true w opcjach kompilacji, aby wygenerować wszystkie lokalizacje jednocześnie.

"build": {
  "options": {
    "localize": true,
    "outputPath": "dist/app"
  }
}

Kompilowanie wszystkich lokalizacji

Uruchom kompilację produkcyjną; CLI utworzy po jednym folderze dla każdej lokalizacji, a każdy z nich będzie zawierał kompletną aplikację.

ng build --localize
# dist/app/en/  dist/app/fr/  dist/app/es/

Kompilowanie jednej lokalizacji

Aby szybciej iterować, możesz skompilować tylko jedną lokalizację, przekazując jej kod.

ng build --localize=fr

Ustawianie base href dla każdej lokalizacji

Każda kompilacja lokalizacji może otrzymać własne baseHref, dzięki czemu aplikacja będzie dostępna pod ścieżką podrzędną, taką jak /fr/. Skonfiguruj ją dla każdej lokalizacji w angular.json.

"locales": {
  "fr": {
    "translation": "src/locale/messages.fr.xlf",
    "baseHref": "/fr/"
  }
}

Uruchamianie konkretnej lokalizacji w trybie deweloperskim

ng serve obsługuje jednocześnie jedną lokalizację. Przekaż konfigurację lub lokalizację, której tłumaczenia chcesz wyświetlić podczas programowania.

ng serve --configuration=fr

Kierowanie użytkowników do ich lokalizacji

Ponieważ każda lokalizacja jest osobnym folderem gotowym do wdrożenia, zazwyczaj używa się serwera lub CDN-u do przekierowania użytkowników do właściwej ścieżki podrzędnej na podstawie nagłówka Accept-Language lub przełącznika języka.

Runtime $localize w niestandardowych konfiguracjach

Zaawansowane konfiguracje mogą ładować tłumaczenia w czasie działania za pomocą loadTranslations() z @angular/localize przed uruchomieniem aplikacji. Zamiast osobnej kompilacji dla każdej lokalizacji otrzymujesz wtedy jeden bundle oraz pobieraną mapę tłumaczeń.

import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)

Wymaganie dotyczące polyfillu

Korzystanie z $localize wymaga polyfillu @angular/localize. Należy dodać go jednokrotnie za pomocą CLI; rejestruje on globalny obiekt potrzebny do tłumaczenia szablonów tagowanych.

ng add @angular/localize

Niewielki rozmiar bundla

Ponieważ tłumaczenie odbywa się podczas budowania, francuski bundle zawiera wyłącznie francuski tekst — bez innych języków i bez silnika tłumaczeń dostarczanego do przeglądarki. Dlatego i18n podczas kompilacji pozwala zachować niewielki rozmiar aplikacji.

Wdrażanie wynikowej aplikacji

Należy wdrożyć cały katalog dist/app; każdy podkatalog lokalizacji zawiera samodzielną aplikację. Proszę skonfigurować serwer tak, aby ścieżka /fr/ udostępniała francuską wersję, a domyślna lokalizacja była dostępna w katalogu głównym lub pod własną ścieżką.

Szybkie sprawdzenie

W jaki sposób Angular dostarcza tłumaczenia?

Podsumowanie

Ustaw localize: true i uruchom ng build --localize, aby wygenerować osobny katalog dla każdej lokalizacji, przy czym każdy z nich zawiera kompletną aplikację. Używaj wartości baseHref właściwej dla danej lokalizacji (np. /fr/), uruchamiaj w środowisku deweloperskim pojedynczą lokalizację za pomocą --configuration, dodaj polyfill @angular/localize i opcjonalnie ładuj tłumaczenia w czasie działania w niestandardowych konfiguracjach.

Często zadawane pytania

Czy lekcja „Budowanie zlokalizowanych pakietów” jest bezpłatna?

Tak — pełny tekst „Budowanie zlokalizowanych pakietów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Budowanie zlokalizowanych pakietów”?

Tworzyć kompilacje aplikacji dla poszczególnych lokalizacji Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Budowanie zlokalizowanych pakietów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy