Can't bind to 'translocoRead' since it isn't a known property of 'ng-container' only with npm start

[Chris-Frendo]

I am getting the below error only when running the project in the angular dev server using npm start. When I build and deploy I don't get the error so I'm not sure why I'm getting the issue. The TranslocoModule is placed in my AppModule properly (else it wouldn't work when building and deploying anyways)

Any ideas on why this is happening?

Can't bind to 'translocoRead' since it isn't a known property of 'ng-container' (used in the 'UpgradeLoginModal' component template).
1. If 'ng-container' is an Angular component and it has the 'translocoRead' input, then verify that it is a part of an @NgModule where this component is declared.
2. If 'ng-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

[shaharkazaz]

@Chris-Frendo Please share a small reproduction or at least some relevant snippets, it's hard to provide assistance without more information.

[ciappara]

HI @shaharkazaz. We have a 'LoginComponent' that is called from a service: 'HelperService'. This component is accessed from all the other modules which loads on top of the other pages when a user's token has expired. If we use a transloco pipe or transloco read functionality, we are receiving the error in the first post. The TranslocoModule is imported in all modules.

Following is the code how we're using Transloco Read:

`<ng-container *transloco="let t; read: 'translations.login'">

<div class="modal-dialog transaction-modal m-0">
    <div class="modal-content form-settings mt-0">

            <p class="text-center">
                {{ getTitle() }}
            </p>

            <form [formGroup]="form" method="post" (ngSubmit)="onSubmit()">
                
                <div class="row" style="justify-content: center">
                    <div class="form-group">

                            <div class="form-group">
                                <input type="email" formControlName="email" [placeholder]="t('email')">
                                <app-validate [control]="f.email"></app-validate>
                            </div>
                            
                            <div class="form-group">
                                <app-password-field [name]="t('password')" [form]="form"></app-password-field>
                                <app-validate [control]="f.password"></app-validate>
                            </div>

                    </div>
                </div>

                <div class="form-group">

                        <input type="submit"
                            value="Verify"
                            [disabled]="verifyTwoFaClicked"
                            class="btn btn-modal-primary fbtn-block mx-auto verify-button">

                </div>

                <div class="text-center">
                    <a (click)="gotoLogin()" class="link-under-button">{{ t('user-change', {rootName: rootName}) }}</a>
                </div>

            </form>

    </div>
</div>

`

[shaharkazaz]

In which module is this component declared? is it a standalone component? you need to import the TranslocoModule where the component is declared.