Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Can't resolve Bootstrap.

cparrish pro asked 5 years ago


showing up when I try to run ng serve after a new install of mdb via npm using these directions for Pro

Expected behavior I'm able to compile and view my app.

Actual behavior I'm getting the following error message Module not found: Error: Can't resolve I have checked and bootstrap.scss is in fact in the directory it's looking for.

Resources (screenshots, code snippets etc.)

screenshot of full error here.


Damian Gemza staff answered 5 years ago


Dear cparrish,

You have a typo in angular.json file. Not assests but assets in line in which you're importing the Bootstrap.

Please change this line: "node_modules/ng-uikit-pro-standard/assests/scss/bootstrap/bootstrap.scss",

to:

"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",

Best Regards,

Damian


cparrish pro commented 5 years ago

Thank you - that was my issue. seems all good now.


cparrish pro answered 5 years ago


ERROR in multi ./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss ./node_modules/@fortawesome/fontawesome-free/scss/solid.scss ./node_modules/@fortawesome/fontawesome-free/scss/regular.scss ./node_modules/@fortawesome/fontawesome-free/scss/brands.scss ./node_modules/ng-uikit-pro-standard/assests/scss/bootstrap/bootstrap.scss ./node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss ./src/styles.scss
Module not found: Error: Can't resolve '/home/cparrish/sandbox/phoenix/node_modules/ng-uikit-pro-standard/assests/scss/bootstrap/bootstrap.scss' in '/home/cparrish/sandbox/phoenix'

cparrish pro answered 5 years ago


I removed the install of MDB above but here it is in Package.json

{
  "name": "phoenix",
  "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.2.9",
    "@angular/common": "^7.2.9",
    "@angular/compiler": "^7.2.9",
    "@angular/core": "^7.2.9",
    "@angular/forms": "^7.2.9",
    "@angular/http": "^7.2.9",
    "@angular/platform-browser": "^7.2.9",
    "@angular/platform-browser-dynamic": "^7.2.9",
    "@angular/router": "^7.2.9",
    "@fortawesome/fontawesome-free": "^5.8.0",
    "@ngtools/webpack": "^7.3.5",
    "@types/chart.js": "^2.7.49",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "easy-pie-chart": "^2.1.7",
    "hammerjs": "^2.0.8",
    "jasmine-marbles": "^0.4.1",
    "ng-uikit-pro-standard": "git+https://mytoken@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "rxjs": "~6.4.0",
    "screenfull": "^3.3.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.6",
    "@angular/cli": "^7.3.5",
    "@angular/compiler-cli": "^7.2.10",
    "@angular/language-service": "^7.2.9",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0-beta.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "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.14.0",
    "typescript": "^3.1.1"
  }
}

Arkadiusz Idzikowski staff answered 5 years ago


It looks like everything is configured correctly (I'm not sure about package.json and MDB installation because there is something wrong with the code snippet you provided). Please try to remove node_modules and package-lock.json, run npm install again and let me know if that helped.


cparrish pro commented 5 years ago

Already tried that - didn't change the results any.


cparrish pro answered 5 years ago


npm ls --depth=0
phoenix@0.0.0 /home/cparrish/sandbox/phoenix
├── @angular-devkit/build-angular@0.13.6
├── @angular/animations@7.2.10
├── @angular/cli@7.3.6
├── @angular/common@7.2.10
├── @angular/compiler@7.2.10
├── @angular/compiler-cli@7.2.10
├── @angular/core@7.2.10
├── @angular/forms@7.2.10
├── @angular/http@7.2.10
├── @angular/language-service@7.2.10
├── @angular/platform-browser@7.2.10
├── @angular/platform-browser-dynamic@7.2.10
├── @angular/router@7.2.10
├── @fortawesome/fontawesome-free@5.8.1
├── @ngtools/webpack@7.3.6
├── @types/chart.js@2.7.49
├── @types/jasmine@2.8.16
├── @types/jasminewd2@2.0.6
├── @types/node@8.9.5
├── chart.js@2.8.0
├── codelyzer@5.0.0-beta.1
├── core-js@2.6.5
├── easy-pie-chart@2.1.7
├── hammerjs@2.0.8
├── jasmine-core@2.99.1
├── jasmine-marbles@0.4.1
├── jasmine-spec-reporter@4.2.1
├── karma@4.0.1
├── karma-chrome-launcher@2.2.0
├── karma-coverage-istanbul-reporter@2.0.5
├── karma-jasmine@1.1.2
├── karma-jasmine-html-reporter@0.2.2
├── protractor@5.4.2
├── rxjs@6.4.0
├── screenfull@3.3.3
├── ts-node@7.0.1
├── tslint@5.14.0
├── typescript@3.1.1
└── zone.js@0.8.26

ng version

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / _| | | | |/ _ | '| | | | | | | / \| | | | (| | || | | (| | | | || | | | // __| ||__, |__,||__,|| __**|_|_| |**_/

Angular CLI: 7.3.6Node: 10.0.0OS: linux x64Angular: 7.2.10... animations, common, compiler, compiler-cli, core, forms... http, language-service, platform-browser... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.13.6@angular-devkit/build-angular 0.13.6@angular-devkit/build-optimizer 0.13.6@angular-devkit/build-webpack 0.13.6@angular-devkit/core 7.3.6@angular-devkit/schematics 7.3.6@angular/cli 7.3.6@ngtools/webpack 7.3.6@schematics/angular 7.3.6@schematics/update 0.13.6rxjs 6.4.0typescript 3.1.1webpack 4.29.0

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "phoenix": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "pa",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss",
          "prefix": "pa"
        },
        "@schematics/angular:directive": {
          "prefix": "pa"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/phoenix",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/ng-uikit-pro-standard/assests/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
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "phoenix:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "phoenix:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "phoenix: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": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "phoenix-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "phoenix:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "phoenix:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "phoenix"
}

app.module.ts

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

import { MDBBootstrapModulesPro, MDBSpinningPreloader } from 'ng-uikit-pro-standard';


import { AppComponent } from './app.component';
import { RestApiService } from './services/rest-api.service';
import { SessionInfoService } from './services/session-info.service';
import { UserService } from './services/user.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    MDBBootstrapModulesPro.forRoot()
  ],
  providers: [MDBSpinningPreloader, RestApiService, SessionInfoService, UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Arkadiusz Idzikowski staff answered 5 years ago


Could you provide the code from your package.json (please remember to remove your private token if you use one), angular.json and app.module?



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: 7.4.2
  • Device: Desktop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: Yes
  • Provided link: Yes