Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular route localization

Angular route localization

B5a5aa65ece7b78c2b73afca48c48885?s=128

Miroslav Jonaš

May 10, 2017
Tweet

Transcript

  1. ANGULAR ROUTE LOCALIZATION ANGULAR MEETUP / APRIL 2017

  2. ANGULAR ROUTE LOCALIZATION WHAT IS IT? ▸ Route localization ▸

    Angular package ▸ Built for version 2+ ▸ Typescript ▸ v0.7.0
  3. ANGULAR ROUTE LOCALIZATION WHY WOULD YOU CARE? www.site.com?page=98cf9c41-00fe-4f39-a813-91fc8a125770 www.site.com/users/4/account/profile www.site.com/watumiaji/4/akaunti/wasifu

    ‣ Do I support multiple languages? ‣ Do I plan to support multiple languages? ‣ Can I guarantee there will be no language support?
  4. THE STORY BEHIND

  5. ANGULAR ROUTE LOCALIZATION HOW DOES IT WORK? ▸ APP_INITIALIZER to

    hijack the routes ▸ Route data property ▸ [routerLink] + Pipe ▸ Service for dynamic routes ▸ StartNavigation event ▸ ngx-translate (currently)
  6. ANGULAR ROUTE LOCALIZATION [ { path: ‘home’, component: HomeComp },

    { path: ‘users’, 
 children: [ { path: ‘’, component: UsersComp }, { path: ‘:id’, component: UserComp }, { path: ‘:id/account’, component: AccountComp} ] } ] original routes [ { path: ‘’, redirectTo: ‘en’, pathMatch: ‘full’ }, { path: ‘de’, children: [ { path: ‘startseite’, component: HomeComp }, { path: ‘benutzer’, 
 children: [ { path: ‘’, component: UsersComp }, { path: ‘:id’, component: UserComp }, { path: ‘:id/bericht’, component: AccountComp} ] } ] } ] translated routes (*de)
  7. ANGULAR ROUTE LOCALIZATION { “ROUTER.users”: “benutzer”, “ROUTER.profile”: “profil”, “ROUTER.account”: “bericht”

    } + /users/4/account/profile = de/benutzer/4/bericht/profil i18n/de.json
  8. ANGULAR ROUTE LOCALIZATION BUT NOT SO SIMPLE… ▸ AOT vs

    Lazy loading ▸ No event after lazy load ▸ Router changes
  9. TL;DEMO

  10. ANGULAR ROUTE LOCALIZATION CURRENT STATE ▸ Lazy loading still not

    there ▸ Tight coupling with ngx-translate ▸ Use it ▸ Find issues ▸ Help solve them
  11. ANGULAR ROUTE LOCALIZATION ▸ npm install —save localize-router ▸ https://www.npmjs.com/package/localize-router

    ▸ https://github.com/Greentube/localize-router ▸ @meeroslav ▸ https://github.com/meeroslav
  12. THANK YOU