transloco | 🚀 😍 The internationalization library for Angular | Frontend Framework library

I think that you should organize your JSON translation file to have a parent attribute containing all of your 30 translations required by your component (let's call the parent attribute parentAttribute, but find a better name ;)) :

You're converting it incorrectly

I'm sure there's a better way of doing this (there are a lot of operators and use cases around RxJS), but as a valid solution/workaround the problem would get fixed if you just pick up the first emitted observable by using RxJS Operator "take", so you get rid of those repeated subscriptions coming next.

Example: On your AuthService call add a take(1):

What I was needing was to use shareReplay(1) and take(1) on different functions on my service to make it work as expected without repeating unnecessary calls.

It would end up looking like this:

You should be able to use a transloco pipe for your translation.

I would try to debug the Form controls properties when they are in the frontend Component (when it is named 'createDetailsForm') and when they are in the validate function (when it is named 'form'). Without testing throughtly it seems that the form object is duplicated and then the changes made in the validate function are not propagated to the form defined in the visual component. I would also try to change the signature of the validate function so it returns the incorrect fields, something like that:

Your mock for MatDialog is not good enough.

If you want to reset the spy count, either reset the mocks inside the test case or inside the afterEach block. It will reset the number of times spy called.

This error is telling you that it is not finding in the app.component.spec.ts file the provider DEFAULT_LOCALE.

What you need to do is. You need to register DEFAULT_LOCALE in your app.component.spec.ts file under TestBed.configureTestingModule as a provider: