🌍 Add Internationalization (i18n) Support

[desoga10]

Description

Make Angular.ng available in multiple languages to serve a global user base and improve accessibility for non-English speakers.

Why This Matters

• Expand user base internationally
• Improve usability for non-English speakers
• Professional appearance in global markets
• Competitive advantage

Features

1. Language Selector

• Location: Header or settings page
• Visual: Dropdown with flag icons
• Persistent: Save preference to user profile
• Auto-detect: Use browser language on first visit

2. Initial Languages

Start with 4 major languages:

• 🇬🇧 English (default)
• 🇪🇸 Spanish - 460M+ speakers
• 🇫🇷 French - 280M+ speakers
• 🇩🇪 German - 135M+ speakers

3. What Needs Translation

• Navigation menu
• Button labels
• Form labels and placeholders
• Error messages
• Success messages
• Invoice status labels
• Dashboard metrics
• Settings pages

4. Locale-Specific Formatting

Date Formats:

• US: 10/27/2025
• EU: 27/10/2025

Number Formats:

• US: 1,234.56
• EU: 1.234,56

Currency:

• Before: $1,000.00
• After: 1.000,00 €

Technical Approach

Use ngx-translate for runtime language switching

Project Structure:

src/assets/i18n/
  en.json    # English
  es.json    # Spanish
  fr.json    # French
  de.json    # German

Translation File Example:

{
  "nav": {
    "dashboard": "Dashboard",
    "invoices": "Invoices",
    "settings": "Settings"
  },
  "invoice": {
    "create": "Create Invoice",
    "status": {
      "paid": "Paid",
      "unpaid": "Unpaid"
    }
  },
  "common": {
    "save": "Save",
    "cancel": "Cancel"
  }
}

Database Schema

-- Add language preference
ALTER TABLE user_settings
ADD COLUMN preferred_language VARCHAR(5) DEFAULT 'en';

Translation Workflow

Key Naming Convention

Use hierarchical structure:

• invoice.form.client.label
• common.save
• messages.success.created

For Contributors

1. Replace hardcoded text with translation keys
2. Add translations to all 4 language files
3. Test with each language
4. Submit PR

Design Considerations

Text Expansion:

• German text is often 30% longer than English
• Use flexible layouts
• Test buttons don't break with longer text

UI Elements:

• Language selector with flags or language codes
• Show current language clearly
• Easy to switch languages
• Confirm language change saved

Acceptance Criteria

• Language selector visible and functional
• 4 languages supported (EN, ES, FR, DE)
• All UI text translatable
• Language preference persists
• Date formatting respects locale
• Number formatting respects locale
• Currency formatting respects locale
• Missing translations fall back to English
• No hardcoded text in templates
• PDF invoices respect language setting

Testing Checklist

• Switch between all languages
• All pages display translated text
• Date/number formats change per locale
• Language persists after page refresh
• No broken layouts with German text
• Browser language detection works
• All translation files complete

Translation Progress

Track completion per language:

English (en.json) ✅ Complete
Spanish (es.json) 🚧 In Progress
French (fr.json) ⏳ Not Started
German (de.json) ⏳ Not Started

Edge Cases

• Missing translation key → falls back to English
• Special characters (é, ñ, ü, ä, ß)
• Very long German words
• Pluralization differences
• Date/time zone handling

Priority

Medium - Important for growth, not critical initially

Estimated Complexity

Medium - Setup straightforward, translation work ongoing

Implementation Phases

Phase 1: Install ngx-translate and setup infrastructure
Phase 2: Create translation files and translate core features
Phase 3: Add language selector UI
Phase 4: Implement locale-specific formatting
Phase 5: Complete all translations and test

Future Enhancements

• More languages (Italian, Portuguese, Chinese, Arabic)
• RTL support for Arabic/Hebrew
• Community translation platform
• Auto-translate suggestions

Call for Contributors

🌍 Native speakers wanted! Help translate Angular.ng:

1. Copy English translation file
2. Translate to your language
3. Submit pull request

Even partial translations are valuable!

Resources

• ngx-translate Documentation
• Angular i18n Guide

Notes

Start with English as base. Add Spanish first (largest user base). Community can help with French and German.