Angular 11 ngx-translate not working on other components other than app.component

I'm trying to translate my application for it to work in both English and Spanish. But it only translates things that are in the app.component.html.

If i try to translate anything in any other component i get the error No pipe found with name 'translate'.

Here is my app.module.ts:

...other imports
    import { HttpClientModule, HttpClient } from '@angular/common/http';
    import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
    import { TranslateHttpLoader } from '@ngx-translate/http-loader';

//import { WOW } from 'wow.js';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent,
    SecureComponent,
    TopNavbarComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PublicModule,
    RouterModule,
    MDBBootstrapModule.forRoot(),
    NgwWowModule,
    ChartsModule,
    NgxIbanModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In app-routing.module.ts i do:

@NgModule({
  imports: [RouterModule.forRoot(routes),
    TranslateModule
  ],
  exports: [RouterModule,
    TranslateModule]
})

Here is my app.component.ts:

import { Component, OnInit } from '@angular/core';
import { NgwWowService } from 'ngx-wow';
import {TranslateService} from '@ngx-translate/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  constructor(private wowService: NgwWowService, private translate: TranslateService) {
    this.wowService.init();
  // the lang to use, if the lang isn't available, it will use the current loader to get them
  translate.setDefaultLang('en');
  // for default language to be english, you need to use below code
  //translate.use('en');
  }

So if i do this in my app.component.html:

<div>
  <h1>{{ 'home.title' | translate }}</h1>

  <!-- translation: translation pipe -->
  <p>{{ 'home.text' | translate }}</p>

  <!-- translation: directive (key as attribute)-->
  <p [translate]="'home.text'"></p>

  <!-- translation: directive (key as content of element) -->
  <p translate>home.text</p>
</div>

It outputs the following:

Translation demo
This is a simple demonstration app for ngx-translate

This is a simple demonstration app for ngx-translate

This is a simple demonstration app for ngx-translate

but if i put the same html in home.component.html i get the error:

Error: src/app/public/home/home.component.html:4:25 - error NG8004: No pipe found with name 'translate'.
    
    4   <h1>{{ 'home.title' | translate }}</h1>
                              ~~~~~~~~~
    
      src/app/public/home/home.component.ts:6:16
        6   templateUrl: './home.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component HomeComponent.

This is my home.component.ts:

import { Component, OnInit } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private translate: TranslateService) { 
    
  }

  ngOnInit(): void {
  }

}

I don't understand why it wouldn't work since all of the relevant imports are the same for app.component and home.component. The translation texts are within assets/i18n/en.json and assets/i18n/es.json

You have to import TranslateModule in the module where there are the components where you use translate pipe