enable i18n

package.json

@@ -19,6 +19,8 @@
     "@angular/platform-browser": "^17.1.0",
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -43,6 +45,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "ngx-translate-testing": "^7.0.0",
     "typescript": "~5.3.2"
   }
 }

src/app/app.component.html

@@ -1,6 +1,7 @@
 <div>
-  <h1>Hello, {{ title }}</h1>
+  <h1>{{ 'HELLO' | translate:{value: title} }}</h1>
   <p>Congratulations! Your app is running. 🎉</p>
+
+  <router-outlet />
 </div>
 
-<router-outlet />

src/app/app.component.spec.ts

@@ -1,10 +1,18 @@
-import { TestBed } from '@angular/core/testing'
+import { ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing'
 import { AppComponent } from './app.component'
+import { TranslateTestingModule } from 'ngx-translate-testing';
+import en from '../assets/i18n/en.json'
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      imports: [
+        AppComponent, 
+        TranslateTestingModule
+          .withTranslations('en', en)
+          .withDefaultLanguage('en')
+        ],
+      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
     }).compileComponents()
   })
 
@@ -22,7 +30,6 @@ describe('AppComponent', () => {
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent)
-    fixture.detectChanges()
     const compiled = fixture.nativeElement as HTMLElement
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, contracts-angular')
   })

src/app/app.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core'
 import { RouterOutlet } from '@angular/router'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, TranslateModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })

src/app/app.config.ts

@@ -1,8 +1,26 @@
-import { ApplicationConfig } from '@angular/core'
+import { ApplicationConfig, importProvidersFrom } from '@angular/core'
 import { provideRouter } from '@angular/router'
 
 import { routes } from './app.routes'
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
+import { HttpClient, provideHttpClient } from '@angular/common/http'
+import { TranslateHttpLoader } from '@ngx-translate/http-loader'
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http)
+}
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(),
+    importProvidersFrom(TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient],
+      },
+    })),
+  ],
 }

src/assets/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "HELLO": "Hello, {{value}}"
+}

tsconfig.json

@@ -22,7 +22,8 @@
     "lib": [
       "ES2022",
       "dom"
-    ]
+    ],
+    "resolveJsonModule": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,