what is the best practice for creating translation files with angular?

i'am working on a front-end project with angular. I need to implement translation.
I want to know what is the best practice to create translation files. i was thinking about creating a translation file for every component instead of a file per language.

i haven't tried anything i just want to know.

Here you can find the best solution https://github.com/ngx-translate/core

Install the module and pendencies

> npm install @ngx-translate/core --save
> npm install @ngx-translate/http-loader --save

Import the module on appModule

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Here is how you would use the TranslateHttpLoader to load translations from "/assets/i18n/[lang].json" ([lang] is the lang that you're using, for english it could be en):

On html just use the pipe:

<li>{{ 'generic.label.hello.world' | translate }}</li>

if you have in your /assets/i18n/en.json

{
 "generic.label.hello.world": "Hello World"
}

It sould work