Angular route localization

Transcript

1. ANGULAR ROUTE
   LOCALIZATION
   ANGULAR MEETUP / APRIL 2017
   

   View Slide

2. ANGULAR ROUTE LOCALIZATION
   WHAT IS IT?
   ▸ Route localization
   ▸ Angular package
   ▸ Built for version 2+
   ▸ Typescript
   ▸ v0.7.0
   

   View Slide

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?
   

   View Slide

4. THE STORY BEHIND
   

   View Slide

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)
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

8. ANGULAR ROUTE LOCALIZATION
   BUT NOT SO
   SIMPLE…
   ▸ AOT vs Lazy loading
   ▸ No event after lazy load
   ▸ Router changes
   

   View Slide

9. TL;DEMO
   

   View Slide

10. ANGULAR ROUTE LOCALIZATION
    CURRENT STATE
    ▸ Lazy loading still not there
    ▸ Tight coupling with ngx-translate
    ▸ Use it
    ▸ Find issues
    ▸ Help solve them
    

    View Slide

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
    

    View Slide

12. THANK YOU
    

    View Slide