1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
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?

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

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
Tags
bootstrap installation
About author
cparrish
Pro User 152Support score
11Questions 8Answers 0Snippets