1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: ng-uikit-pro-standard SCSS

Burt du Preez pro asked 5 years ago

I've setup a new Angular MDB Pro project using https://mdbootstrap.com/docs/angular/getting-started/quick-start/ Specifically I've added   
"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"
]
As instructed. When the page is served, both styles.scss and font-awesome.scss are rendered in <style type="text/css"></style> tags as expected. But neither mdb.scss nor bootstrap.scss get rendered this way. They are also not rendered elsewhere as using any of the bootstrap or mdb css classes in the html simply do not work. To bypass this, though I'm sure this is not the right way to do it, I've added   
@import "~ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss";
To the src/styles.scss file, which then adds bootstrap to the page (within the styles.scss file, which I figure is not best practise), but adding 
@import "~ng-uikit-pro-standard/assets/scss/mdb.scss";
To the file causes the following error 
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\fusio\Documents\git\leaderware-web\src\main\angular\dep\ng-uikit-pro-standard\assets\scss\angular\pro\_lightbox.scss:230:16: Can't resolve '../img/lightbox/default-skin.png' in 'C:\Users\fusio
\Documents\git\leaderware-web\src\main\angular\src'
  What is the correct way to add the required scss files to the page?

Burt du Preez pro answered 5 years ago

So I did a whole lot more messing around and the issue is indeed with my usage of file:./dep/ng-uikit-pro-standard When dependencies are referenced like this, npm creates a symlink in the node_modules folder. everything works find in general, but it seems webpack has an issue resolving these https://github.com/webpack/webpack/issues/811 Using the git link, or hard copying the files over in an npm postinstall script works to render the css as expected.

Arkadiusz Idzikowski staff answered 5 years ago

Please send me a demo app on which I would be albo to debug this problem (you can send it to a.idzikowski@mdbootstrap.com). I think it may be related to module organisation. Please try to add MDB import to your other modules (core/shared) and let me know if that help.

Burt du Preez pro answered 5 years ago

I added that line, replacing the download from gitlab. There were some times the gitlab server was dead which messed with my builds so I have it available locally now to not have that dependency. Regardless the ng-uikit-pro-standard is correctly in node_modules, with the scss folder in there. I'm able to use the Angular MDB directives, they just don't have any styling. I've also tried angular 5 and 6 with the same effect.

Arkadiusz Idzikowski staff answered 5 years ago

ng-uikit-pro-standard: file:./dep/ng-uikit-pro-standard - this line was by default in your package.json or did you change it later? Please make sure that MDB files are installed correctly in node_modules/ng-uikit-pro-standard. You can also try do downgrade to Angular 6 version. Our product doesn't support Angular 7 yet. Regards, Arek

Burt du Preez pro answered 5 years ago

angular.json 
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../resources/public",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "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": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.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"
            ],
            "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"
            ],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/angular-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    },
    "angular-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angular:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angular:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angular"
}


package.json


{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod && ng run angular:server && webpack --config webpack.config.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "~7.0.0",
    "@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/platform-server": "~7.0.0",
    "@angular/pwa": "^0.10.4",
    "@angular/router": "~7.0.0",
    "@angular/service-worker": "~7.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^7.0.2",
    "@types/chart.js": "^2.7.40",
    "angular5-csv": "^0.2.10",
    "bundle-loader": "^0.5.6",
    "chart.js": "^2.5.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "ng-uikit-pro-standard": "file:./dep/ng-uikit-pro-standard",
    "rxjs": "~6.3.3",
    "screenfull": "^3.3.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "^7.0.4",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "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-loader": "^5.3.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1",
    "webpack-cli": "^3.1.2"
  }
}


app.module.ts


import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {ServiceWorkerModule} from '@angular/service-worker';
import {environment} from '../environments/environment';
import {MDBBootstrapModulesPro} from "ng-uikit-pro-standard";
import {AgmCoreModule} from "@agm/core";
import {InfoModule} from "./info/info.module";
import {SharedModule} from "./shared/shared.module";
import {CoreModule} from "./core/core.module";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
    InfoModule,
    SharedModule,
    CoreModule,
    MDBBootstrapModulesPro.forRoot(),
    AgmCoreModule.forRoot({apiKey: 'Your_api_key'}),
    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Burt du Preez pro commented 5 years ago

It's the angular.json, then packages.json then app.module.ts

Arkadiusz Idzikowski staff answered 5 years ago

Dear Burt du Preez, Please show me your angular.json, app.module and package.json files. Regards, Arek

Burt du Preez pro commented 5 years ago

Files added to the post below
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: All
  • Browser: All
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No
Tags
scss
About author
Burt du Preez
Pro User 40Support score
1Questions 3Answers 0Snippets