Angular route localization

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