Why is Locomotive Scroll not working when using Angular <router-outlet>?

Question

I'm using Locomotive Scroll version 4.1.4 in my Angular project.

Problem

I imported Locomotive Scroll in app.component.ts. The problem is that when using <router-outlet> the app "freezes" (i.e., no scrolling is possible at all). The router displays, let's say, Home page (i.e., home.component.html) where I use Locomotive Scroll element attributes (e.g., data-scroll data-scroll-speed="2") as expected, but no scrolling is possible.

Not working:

app.component.html

<div data-scroll-container>
    <header data-scroll-section>
        <app-header></app-header>
    </header>

    <main data-scroll-section>
        <router-outlet></router-outlet>
    </main>

    <footer data-scroll-section>
        <app-footer></app-footer>
    </footer>
</div>

While if I copy-paste the content from the home.component.html directly into app.component.html everything works like a charm!

Working:

app.component.html

<div data-scroll-container>
    <header data-scroll-section>
        <app-header></app-header>
    </header>

    <main>
        <!-- Content from home.component.html -->
        <div data-scroll-section>
            <h1 data-scroll>Hey</h1>
            <p data-scroll></p>
        </div>
        <div data-scroll-section>
            <h2 data-scroll data-scroll-speed="1">What's up?</h2>
            <p data-scroll data-scroll-speed="2"></p>
        </div>
    </main>

    <footer data-scroll-section>
        <app-footer></app-footer>
    </footer>
</div>

What I've tried

1. If I import Locomotive Scroll also in home.component.ts then I have Locomotive Scroll imported twice in my project (i.e., in app.component.ts and home.component.ts). Consequently, Locomotive Scroll starts working when the Home page is displayed, but the whole app is broken (i.e., some weird glitches are happening due to the two Locomotive Scroll imports interfering with each other).
2. If I import Locomotive Scroll only in home.component.ts and remove it from app.component.ts then <header> and <footer> are not displayed correctly (i.e., they are displayed behind the <main>), but the Locomotive Scroll starts working when the Home page is displayed.

Question

How can I import Locomotive Scroll once in my app (i.e., in app.component.ts) and use <router-outlet> so that Locomotive Scroll works if I use Locomotive Scroll element attributes (e.g., data-scroll data-scroll-speed="2") in a particular component, let's say, home.component.html?