Angular – MDB Navigation Sample not rendering as expected

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('https://mdbcdn.b-cdn.net/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

---