Topic: Angular – MDB Navigation Sample not rendering as expected
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.
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?
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.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
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, DamianBill Bensing pro commented 6 years ago
I can do that, my version is 6.1.4Bill 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