Can't resolve Bootstrap.

Topic: Can't resolve Bootstrap.

cparrish pro asked 6 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.

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

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 6 years ago

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

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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?

Add comment

cparrish pro answered 6 years ago

0 0 Best answer

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 { }

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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 6 years ago

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

Add comment

cparrish pro answered 6 years ago

0 0 Best answer

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"
  }
}

Add comment

cparrish pro answered 6 years ago

0 0 Best answer

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'

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 7.4.2
Device: Desktop
Browser: Chrome
OS: Linux
Provided sample code: No
Provided link: Yes

cparrish

Pro User

152Support score
11Questions 8Answers

0Snippets likes 0Snippets