Type '"rail"' is not assignable to type 'MatDrawerMode'

[thxmike]

When following the installation steps outlined in the readme and running ng build I receive the following error:

Error: src/app/components/navigation/navigation.component.html:13:38 - error TS2322: Type '"rail"' is not assignable to type 'MatDrawerMode'.

13   <mat-sidenav #left class="sidenav" mode="rail" opened closeWidth="60px" expandedWidth="200px"
                                        ~~~~

  src/app/components/navigation/navigation.component.ts:5:16
    5   templateUrl: './navigation.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component NavigationComponent.

I am using angular 12.1.2, node 14.16. Below is my package.json dependencies

"dependencies": {
    "@angular/animations": "~12.1.2",
    "@angular/cdk": "^12.1.2",
    "@angular/common": "~12.1.2",
    "@angular/compiler": "~12.1.2",
    "@angular/core": "~12.1.2",
    "@angular/forms": "~12.1.2",
    "@angular/material": "^12.1.2",
    "@angular/platform-browser": "~12.1.2",
    "@angular/platform-browser-dynamic": "~12.1.2",
    "@angular/router": "~12.1.2",
    "@datorama/akita": "^6.2.1",
    "angular-material-rail-drawer": "0.0.6",
    "angular-oauth2-oidc": "^10.0.3",
    "angular-pipes": "^10.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  }

here is my app.module.ts

import { LayoutModule } from '@angular/cdk/layout';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DrawerRailModule } from 'angular-material-rail-drawer';
import { OAuthModule } from 'angular-oauth2-oidc';
import { NgArrayPipesModule, NgWherePipeModule } from 'angular-pipes';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HealthComponent } from './components/health/health.component';
import { HomeComponent } from './components/home/home.component';
import { LogoutComponent } from './components/logout/logout.component';
import { NavigationComponent } from './components/navigation/navigation.component';
import { SnackBarMessageComponent } from './components/snack-bar-message/snack-bar-message.component';
import { AdministrationModule } from './modules/administration/administration.module';
import { GravityMaterialModule } from './modules/gravity-material/gravity-material.module';
import { AuthGuard } from './services/auth-guard/auth-guard.service';
import { ConfigModule } from './services/config/config.module';

@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent,
    HomeComponent,
    HealthComponent,
    LogoutComponent,
    SnackBarMessageComponent
  ],
  imports: [
    OAuthModule.forRoot(),
    NgArrayPipesModule,
    NgWherePipeModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    LayoutModule,
DrawerRailModule,
    MyMaterialModule,
    AdministrationModule,
    ConfigModule

  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent],
})
export class AppModule {}

In my navigation.component that has the mat-sidenav here is the markup

  <mat-sidenav #left class="sidenav" mode="rail" opened closeWidth="60px" expandedWidth="200px"
    [fixedInViewport]="true" [fixedTopGap]="65">

I am not sure if this is angular version issue or if I am missing something. I have my material modules in a separate module, i.e. MyMaterialModule which is imported into the appModule, I have also tried moving the DrawerRailModule to AppModule but this did not help. I can provide more information if required.

[0xJohnnyboy]

Facing the same issue here

[Surdok]

Can you guys please check this issue? I have opted-out of template type checking just for this to work. Even when we try to cast it in the html <mat-sidenav class="noprint" (closedStart)="animationDone(true)" (openedStart)="animationDone()" [expandedWidth]="'330px'" [mode]="$any('rail')" [opened]="isExpanded">

It doesn't work.

[Gallimathias]

Heey guys,

I'll take care of the bug. And I'm in the process of fixing it. Since I use this package almost everywhere here.

The problem is the strict template checking of Angular. Unfortunately there is no real workaround as the template selector only matches the string. That's why the $any in mode trick doesn't work.

Currently, the only workaround is to temporarily set the strict templates mode in angular to false.

[Jordan-Hall]

Thank you @Gallimathias, published the changes and released the version 1

[Surdok]

The recent patch solved the issue.

Thanks guys!