fxFlex translates to "flex: 1 1 0%" when component is recreated

[mereshow]

Bug Report

I use mat-sidenav (Angular material) to display a component (<app-dashboard-home>).

The component occupies the whole sidenav-content. The template of this component has div (row container) that uses the fxFlex directive, and 2 inner divs 50% width each (inner divs).

The first time the component is loaded the inner divs are resized properly when the sidenav drawer is opened/closed. If I navigate to another component and come back, inner divs are not resized properly and expand beyond the row container.

After a lot of testing I traced it to the fxFlex directive in the row container as being translated to flex: "1 1 1e-09px" the first time the component is created and to `flex: "1 1 0%" when it is recreated after navigating away and back.

What is the expected behavior?

When a component that uses fxFlex in its template is recreated, fxFlex should be translate to flex: "1 1 1e-09px".

What is the current behavior?

When the component is destroyed (load another route) and recreated, fxFlex is translated to flex: "1 1 0%".

What are the steps to reproduce?

This only happens in local development, in stackblitz it behaves normally (in stackblitz fxFlex translates to flex: "1 1 1e-09px" in component creation and recreation). I could not figure out why.

I created a demo in stackblitz, it behaves as expected: demo If this repo is cloned and run locally it behaves abnormally: Github repo I tried to clone the repo several times from zero (to reproduce it as you would) but got an error when doing npm install. It works correctly if run as sudo (or npm clean-install).

To reproduce:

1. Run ng s -o. The page loads. Open and close the drawer: the content is resized.
2. Navigate to another page ("historical" in the navigation menu), and navigate back to "dashboard".
3. Open and close the drawer: the content is not resized.

I colored the containers so it is more obvious which elements are not resizing.

Is there anything else we should know?

If I remove the fxLayoutGap in the row container, it behaves as expected, although fxFlex is also recreated as flex: "1 1 0%" (I don't understand why). If I use fxFlex="1 1 100%" in the row container it behaves correctly all the time. I am a rookie in frontend development and Angular, I could be making an obvious mistake.

[CaerusKaru]

If this is still a problem, can you please upgrade everything to the latest major versions?