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