Topic: Angular – MDB Navigation Sample not rendering as expected

Bill Bensing pro asked 6 years ago


I'm trying out the "Double Navigation with hidden SideNav & fixed Navbar" sample on https://mdbootstrap.com/angular/layout/navigation/.  When I copy the code, and drop it into my app, I get an unexpected navigation rendering.

Here is the picture: https://firebasestorage.googleapis.com/v0/b/clatsch-preprod.appspot.com/o/bensing-samples%2FScreen%20Shot%202018-07-16%20at%202.36.28%20PM.png?alt=media&token=808e749f-ed16-40f9-8fbe-08d1d0cec756

When i play around and click the hamburger, i get "jit_nodeValue_9(...).show is not a function".

MDBBootstrapModulesPro.forRoot() is referenced in the module which has the component with this code.

Any idea what the issue may be?

 


Damian Gemza staff commented 6 years ago

Dear Bill, From your screenshot, I assume that your app got a problem with MDB scss. Could you please specify, which version of MDB Angular is you using exactly? Also please provide me here your angular.json, package.json, and app.module.ts code. Without those informations I won't be able to help you well. Best Regards, Damian

Bill Bensing pro commented 6 years ago

I can do that, my version is 6.1.4

Bill Bensing pro commented 6 years ago

-- angular.json -- { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "clatsch-app": { "root": "", "sourceRoot": "src", "projectType": "application", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", "assets": [ "src/assets", "src/favicon.ico", "src/manifest.json" ], "styles": [ "node_modules/font-awesome/scss/font-awesome.scss", "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss", "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "src/styles.scss" ], "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/easy-pie-chart/dist/easypiechart.js", "node_modules/screenfull/dist/screenfull.js", "node_modules/hammerjs/hammer.min.js" ] }, "configurations": { "pre-production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": true, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.pre-prod.ts" } ], "serviceWorker": true }, "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": true, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "serviceWorker": true } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "clatsch-app:build" }, "configurations": { "pre-production": { "browserTarget": "clatsch-app:build:pre-production" }, "production": { "browserTarget": "clatsch-app:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "clatsch-app:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "karmaConfig": "./karma.conf.js", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/easy-pie-chart/dist/easypiechart.js", "node_modules/screenfull/dist/screenfull.js", "node_modules/hammerjs/hammer.min.js" ], "styles": [ "node_modules/font-awesome/scss/font-awesome.scss", "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss", "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", "src/styles.scss" ], "assets": [ "src/assets", "src/favicon.ico", "src/manifest.json" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "clatsch-app-e2e": { "root": "", "sourceRoot": "e2e", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "./protractor.conf.js", "devServerTarget": "clatsch-app:serve" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "e2e/tsconfig.e2e.json" ], "exclude": [ "**/node_modules/**" ] } } } } }, "defaultProject": "clatsch-app", "schematics": { "@schematics/angular:component": { "prefix": "clatsch", "styleext": "scss" }, "@schematics/angular:directive": { "prefix": "clatsch" } } }

Bill Bensing pro commented 6 years ago

-- package.json -- { "name": "maker-angular-app", "version": "0.1.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "start:prod": "ng build --prod && lite-server --baseDir dist", "build": "ng build --prod", "test": "ng test --sourcemaps=false", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@agm/core": "^1.0.0-beta.3", "@angular/animations": "^6.0.6", "@angular/common": "^6.0.6", "@angular/compiler": "^6.0.6", "@angular/core": "^6.0.6", "@angular/forms": "^6.0.6", "@angular/http": "^6.0.6", "@angular/platform-browser": "^6.0.6", "@angular/platform-browser-dynamic": "^6.0.6", "@angular/platform-server": "^6.0.6", "@angular/pwa": "^0.6.8", "@angular/router": "^6.0.6", "@angular/service-worker": "^6.0.6", "@ngrx/core": "^1.2.0", "@ngrx/effects": "^6.0.0", "@ngrx/store": "^6.0.0", "@ngrx/store-devtools": "^6.0.0", "agm-snazzy-info-window": "^1.0.0-beta.5", "angularfire2": "^5.0.0-rc.10", "chart.js": "^2.7.2", "core-js": "^2.4.1", "easy-pie-chart": "^2.1.7", "firebase": "^5.0.4", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "ng-uikit-pro-standard": "git+https://oauth2:[TOKEN-REMOVED]@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git", "ngx-img-cropper": "^0.10.2", "ngx-infinite-scroll": "^0.8.3", "rxjs": "^6.2.1", "rxjs-compat": "^6.2.0", "screenfull": "^3.3.0", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.8", "@angular-devkit/core": "^0.3.1", "@angular-devkit/schematics": "^0.3.1", "@angular/cli": "^6.0.8", "@angular/compiler-cli": "^6.0.6", "@angular/language-service": "^6.0.6", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "ajv": "^6.1.1", "codelyzer": "^4.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "^2.0.4", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "lite-server": "^2.3.0", "ng-pwa-tools": "0.0.15", "protractor": "^5.3.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.7.2" }

Bill Bensing pro commented 6 years ago

-- app.module.ts -- @NgModule({ imports: [ BrowserModule, SharedModule, CoreModule, CoreModule.forRoot(), ClatschModule, EventModule, MakerModule, MemberModule, LoginModule, AngularFireModule.initializeApp(environment.firebaseConfig), AngularFireStorageModule, InfiniteScrollModule, MDBBootstrapModulesPro.forRoot(), NoopAnimationsModule, AppRoutingModule, ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }), ], declarations: [ AppComponent, HomeComponent, ], schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ], providers: [ AuthorizationGuard, HomeGuard, MemberClatschGuard, MemberClatschResolver, MDBSpinningPreloader, { provide: AuthorizationService, useClass: FirebaseAuthService } ], bootstrap: [AppComponent] }) export class AppModule { }

Damian Gemza staff commented 6 years ago

Dear Bill, Everything seems to be okay with your files. Could you please check, if this problem exists with the latest version of MDB Angular? 6.2.0? If it exists in the latest version, please send me a reproduction repository on which I'll be able to debug your case. Best Regards, Damian

Ghi Elmaz pro answered 6 years ago


Hi, I have the same problem with that combo (hidden SideNav & fixed Navbar). Others Navbar are ok (only trying with copy+paste), but with this I have problem with the SideNav. Thank you.
"ng-uikit-pro-standard": "git+https://oauth2:[***removed***]@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",

Ghi Elmaz pro commented 6 years ago

Sorry, all ok after update to MDB PRO 6.2.0 (see before with $ npm outdate and then $ npm update if needed). Thank you.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags