mdc-drawer not displaying after angular 9 update

[madhavan-sundararaj]

Describe the bug After updating from Angular 8 to Angular 9 and angular-mdc-web to 5.05, mdc-drawer is no longer displaying

Screenshots Before update:

After update:

What Angular MDC version are you using? 5.0.5

What OS are you using?: macOS 10.15

What browser(s) is this bug affecting?: All

Additional context I use mat-icons instead of mdc-icons.

[trimox]

Hi @maddy2894 Can you provide a snippet of the drawer html? I'll take a look.

[madhavan-sundararaj]

Hi @trimox , the following code snippet is used for mdc-drawer

<mdc-drawer
    #drawer
    class="mdc-drawer"
    [drawer]="drawerMode"
    [open]="drawerOpened"
    [dir]="dir"
    [@onMainContentChange]="onSideNavChange ? 'open' : 'close'"
  >
    <mdc-drawer-content [dir]="dir">
      <div [@onSideNavChange]="sideNavState ? 'open' : 'close'">
        <div style="height: 800px;">
          <mdc-list>
            <a
              *ngFor="let navLink of primaryNavLinks"
              mdc-list-item
              [hidden]="
                (navLink.isAdminRoute && !userIsAdmin) ||
                (navLink.isLoggedInRoute && !isLoggedIn)
              "
              routerLink="{{ navLink.routerLink }}"
              (click)="hideSideNavAfterClick()"
              [activated]="navLink.activated"
            >
              <mat-icon mdcListItemGraphic class="dark-text-color">{{
                navLink.icon
              }}</mat-icon>
              <span
                class="nav-text"
                class="dark-text-color"
                [@animateText]="linkText ? 'show' : 'hide'"
                >{{ navLink.title }}
              </span>
            </a>
            <a
              *ngFor="let navLink of secondaryNavLinks"
              mdc-list-item
              [hidden]="
                (navLink.isAdminRoute && !userIsAdmin) ||
                (navLink.isLoggedInRoute && !isLoggedIn)
              "
              routerLink="{{ navLink.routerLink }}"
              (click)="hideSideNavAfterClick()"
              [activated]="navLink.activated"
            >
              <mat-icon mdcListItemGraphic class="dark-text-color">{{
                navLink.icon
              }}</mat-icon>
              <span
                class="nav-text"
                [@animateText]="linkText ? 'show' : 'hide'"
                class="dark-text-color"
                >{{ navLink.title }}
              </span>
            </a>
            <a mdc-list-item [hidden]="!isLoggedIn" (click)="logout()">
              <mat-icon mdcListItemGraphic class="dark-text-color"
                >exit_to_app</mat-icon
              >
              <span
                class="nav-text"
                [@animateText]="linkText ? 'show' : 'hide'"
                class="dark-text-color"
                >Log out</span
              >
            </a>
            <button
              class="arrow desktop-visible"
              mat-icon-button
              (click)="onSideNavToggle()"
            >
              <mat-icon
                mdc-list-item
                class="dark-text-color"
                *ngIf="sideNavState"
                >arrow_left</mat-icon
              >
              <mat-icon
                mdc-list-item
                class="dark-text-color"
                *ngIf="!sideNavState"
                >arrow_right</mat-icon
              >
            </button>
            <button
              class="arrow mobile-visible"
              mat-icon-button
              (click)="onSideNavToggle()"
            >
              <mat-icon
                mdc-list-item
                class="dark-text-color"
                *ngIf="!sideNavState"
                >arrow_left</mat-icon
              >
              <mat-icon
                mdc-list-item
                class="dark-text-color"
                *ngIf="sideNavState"
                >arrow_right</mat-icon
              >
            </button>
          </mdc-list>
        </div>
      </div>
    </mdc-drawer-content>
  </mdc-drawer>

[madhavan-sundararaj]

getting this warning too

WARNING in Entry point '@angular-mdc/web' contains deep imports into '/Users/madhavansundararaj/Documents/GitHub/project/node_modules/@material/progress-indicator/component'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

[trimox]

@maddy2894 Thanks for snippet. While I try to duplicate, you mentioned this began after an upgrade. Can you confirm enableIvy is not turned off with Angular 9 project?

How to check - https://github.com/trimox/angular-mdc-web/issues/2123#issuecomment-588981749

[madhavan-sundararaj]

I can confirm that I do not have an option for enableIvy. Since Angular 9 uses Ivy by default, It's not mentioned anywhere.

[trimox]

@maddy2894 Try as I might, can't duplicate yet. I used same code inside demo-app, and genereated a brand new app. Could you provide a small reproducible repo?

[madhavan-sundararaj]

Okay sure

[madhavan-sundararaj]

https://stackblitz.com/edit/angular-zzpzvp

Note: mdc-drawer is not visible even when enable ivy is unchecked in the stackblitz settings.

[trimox]

Thanks! I'm looking now

[trimox]

Ugh. The UMD bundle used by StackBlitz is unusable at the moment. So, for now I downloaded the project. The project appears it was based on an older build of MDC, and needed to match upgrade guide. I'll post StackBlitz in few minutes, just download and install deps. Let's make sure it works for you, then we can track down problem in base app.

[trimox]

Again, UMD bundle is broke making StackBlitz unusable.

https://stackblitz.com/edit/angular-jv31zs

Download, extract and install dependencies.

[madhavan-sundararaj]

Yes, it works after downloading the project

[madhavan-sundararaj]

Hi, any update on this is much appreciated

[trimox]

@maddy2894 If you replace the mat-icon with mdc-icon does the problem persist? I'll try again with mat-icon but I do not believe it to be related. Also, any errors in browser console?

[madhavan-sundararaj]

No errors in the browser console

[trimox]

Tested with mat-icon, as expected no issues. Something is off, you notice each of those icons are bolder in broken screenshot?

Example using mat-icon

<mdc-drawer open="true" drawer="dismissible">
  <mdc-drawer-header title="Drawer Title" subtitle="Subtitle">
  </mdc-drawer-header>
  <mdc-drawer-content>
    <mdc-list>
      <mdc-list-item *ngFor="let item of destinations"
        [activated]="item.activated">
        <mat-icon mdcListItemGraphic *ngIf="item.icon">{{item.icon}}</mat-icon>{{ item.label }}
        </span>
      </mdc-list-item>
    </mdc-list>
  </mdc-drawer-content>
</mdc-drawer>
<div mdcDrawerAppContent>
  Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
  et. Diam phaedrum ei mea, quaeque
  voluptaria efficiantur duo no. Eu adhuc veritus civibus nec, sumo invidunt mel
  id, in vim dictas detraxit.
  legere iriure blandit. Veri iisque accusamus an pri.
</div>

[trimox]

I'll publish v5.1.2 sometime later today to fix UMD bundles, and allowing us to work with StackBlitz again.

[madhavan-sundararaj]

Sounds good. Thank you

[trimox]

Had to delay patch to resolve Ivy issue with our UMD bundle. While I'm fixing this, can you confirm mdc-drawer class is applied correctly while your app is running? This could be a MDC Sass module not loaded.

[madhavan-sundararaj]

Yes, it is applying correctly. Sorry for the late response.

[rharrison33]

Ugh. The UMD bundle used by StackBlitz is unusable at the moment. So, for now I downloaded the project. The project appears it was based on an older build of MDC, and needed to match upgrade guide. I'll post StackBlitz in few minutes, just download and install deps. Let's make sure it works for you, then we can track down problem in base app.

Can someone please point me to the upgrade guide? Thanks in advance!

[madhavan-sundararaj]

Even I couldn't make it work. I had to migrate to angular version 8 because of mdc drawer.

[trimox]

@maddy2894 You may wanna try upcoming v6.0.0 using canary tag. Interested to see if we've resolved this during gulp to bazel transition.

yarn add @angular-mdc/web@canary
# or
npm i @angular-mdc/web@canary

[madhavan-sundararaj]

Yeap sure, will do.

[madhavan-sundararaj]

So should I uninstall current angular-mdc-web and install canary?

[trimox]

@maddy2894 Yeah, I'd recommend uninstalling first. The latest canary is 6.0.0-canary.7 as of this moment..

just heads up, planning to push canary.8 later tonight. It'll include multiple breaking changes for other components..

[madhavan-sundararaj]

Okay cool, thanks for the heads up

[dileepkommireddy]

Hi @trimox , I was same facing same issue while upgrading to angular 9 , MDC DRAWER is not working, Is there any fix for this. I see that in network MDC DRAWER Dependencies are not loading

[dileepkommireddy]

Hi @maddy2894 , Did you get resolved this issue with angular 9 ?

[madhavan-sundararaj]

Hey @trimox, I found that styles are not applying after upgrading to Angular 9. Any solution for it?