This is an example app project for blog post about Typed translations in Angular
It demonstrates usage of lazy loading, dependency injection and TypeScript to achieve internationalised application.
src/app
├─ app.component.ts
├─ app.module.ts // only what is needed for whole app are imported here
├─ app-routing.module.ts // lazy routing of i18n site modules
├─ i18n
│ ├── cs.translation.ts // Czech translation data object
│ ├── en.translation.ts // English translation data object
│ └── utils.ts // exports of Translation type and injection token
└─ site // directory containing site views and i18n site wrappers
├─ home
│ ├─ home.component.css
│ ├─ home.component.html // translation used in template
│ ├─ home.component.ts // translation injected in constructor
│ ├─ home.module.ts
│ └─ home-routing.module.ts
├─ info
│ ├─ info.component.css
│ ├─ info.component.html // translation used in template
│ ├─ info.component.ts // translation injected in constructor
│ ├─ info.module.ts
│ └─ info-routing.module.ts
├─ site.component.ts // component routing site itself
├─ site.cs.module.ts // module providing Czech i18n requireoments (+ importing site module)
├─ site.en.module.ts // module providing English i18n requireoments (+ importing site module)
├─ site.module.ts // shared module imported to specific site modules
└─ site-routing.module.ts // site routing, this routes actual application
More details about the file purposes and code constructions are in the files itself. Setup guide with motivation and concept explanation is in the blog post.
Visit Stackblitz for online demo
or
- Clone the repo
- Install dependencies
npm i - Run
ng servefor a dev server - Navigate to
http://localhost:4200/