Sidenav - this.collapseButton.sideNav is not a function

[cloudSchulze]

Hi,

i imported the sidenav and added the example code from your tutorial into my app.component.html file. After that i get an error:

AppComponent.html:12 ERROR TypeError: this.collapseButton.sideNav is not a function
    at MzSidenavComponent.push../node_modules/ngx-materialize/fesm5/ngx-materialize.js.MzSidenavComponent.initCollapseButton (ngx-materialize.js:4798)
    at MzSidenavComponent.push../node_modules/ngx-materialize/fesm5/ngx-materialize.js.MzSidenavComponent.ngAfterViewInit (ngx-materialize.js:4759)
    at callProviderLifecycles (core.js:18937)
    at callElementProvidersLifecycles (core.js:18911)
    at callLifecycleHooksChildrenFirst (core.js:18901)
    at checkAndUpdateView (core.js:19837)
    at callViewAction (core.js:20069)
    at execComponentViewsAction (core.js:20011)
    at checkAndUpdateView (core.js:19834)
    at callWithDebugContext (core.js:20722)

I don't know what i've done wrong? Can someone help me?

This is my app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MzSidenavModule,
    MzButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my angular.json

 "styles": [
              "src/styles.scss",
              "node_modules/materialize-css/dist/css/materialize.min.css",
              "node_modules/@mdi/font/css/materialdesignicons.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/materialize-css/dist/js/materialize.min.js"
            ]

This is my tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "jquery",
      "materialize-css"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

And this is my package.json

{
  "name": "reitsport-rheinmain-web-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.3",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@mdi/font": "^3.0.39",
    "core-js": "^2.5.4",
    "materialize-css": "^1.0.0-rc.2",
    "ngx-materialize": "^6.1.3",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.5",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

[aetejeida]

You only need to use the version 0.100.2 for MaterializeCss, that work for me.

"materialize-css": "^1.0.0-rc.2" to "materialize-css": "^0.100.2".

[caom92]

I had the same problem, @aetejeida work-around fixed it

[monochromatique]

Change sideNav to sidenav

[AlisonVilela]

+1

[jdoradoRoma]

@aetejeida it works seems to me is the version of the materializer in package.json ->dependencies -> materialize-css.
y had the same vs as @cloudSchulze so i install the older version.
npm install materialize-css@0.100.2