*showItSizes fails when you access the app route directly from the browser

[sarahm7]

I tried using below example but i'm encountering an issue. For example,

My app url is http://example.com which redirects to http://example.com/home -> the directive works fine this way

but when you access http://example.com/home directly, the *showItSizes fails and hides the element from the DOM.

This only happens in production.

@Component({
     selector: 'my-component',
     template: '
        <p *showItSizes="{min:955,max:1057}">I'll show you if responsive-window width is between the min and max.</p>
        <p *showItSizes="{min:750}">I'll show you if responsive-window width is greater than or equal to min.</p>
        <p *hideItSizes="{min:360,max:768}">It is hidden if responsive-window width between the min and max.</p>
     '
})

I have the following app module setup

app.module.ts
@NgModule({
imports: [
AppRoutingModule,
BrowserModule,
BrowserAnimationsModule,
SharedModule.forRoot(),
SignalRModule.forRoot(createConfig)
],

shared.module.ts
imports : [
ResponsiveModule.forRoot()
]