Error using @ngx-translate/core with Angular 5 app

I get the following error when I try to use the @ngx-translate/core app on my Angular App (running v5) with Visual Studio 2017 SPA template.

aspnet-prerendering is turned off on the app i.e. so the index.cshtml is;

<app>Loading...</app>

I have followed the following link as a guide for adding the translation services (along with the official guide);

ngx-translate tutorial

So I have the following in my package.json (all Angular references are ^5.0.0);

"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1",

Then I have the following in my app.browser.module.ts;

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, '/Public/i18n/', '.json');
}

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
        AppModuleShared
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})

In my app.component.ts I have;

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

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
    }

    switchLanguage(language: string) {
        this.translate.use(language);
    }
}

and finally I call my translation in my component;

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

@Component({
    selector: 'hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css']
})
export class HeroComponent {
    constructor(translate: TranslateService) {

    }
}

where in the hero.component.html I have {{ 'Hero.Intro' | translate }}.

However, when I run I get the following error;

Uncaught Error: Template parse errors:
The pipe 'translate' could not be found ("<div class="hero mh-100">
    <h1 class="display-4"> {{ [ERROR ->]'Hero.Intro' | translate }}</h1>