CODEWITHSUNDEEP
angularjs
Dan Vrajmas
Dan Vrajmas

Reputation: 93

ngx-bootstrap BsDropdownModule problems

package.json

  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@angular/router": "^4.4.6",
    "@angular/upgrade": "^4.4.6",
    "@ngx-translate/core": "^6.0.0-beta.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "air-datepicker": "^2.2.3",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "^2.5.4",
    "google-libphonenumber": "^3.1.2",
    "html-minifier": "^3.5.13",
    "jquery": "^3.3.1",
    "moment": "^2.22.0",
    "ngx-bootstrap": "^2.0.3",
    "ngx-intl-tel-input": "^1.0.6",
    "npm": "^5.8.0",
    "popper.js": "^1.14.2",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.5.8",
    "systemjs": "0.19.40",
    "traceur": "0.0.111",
    "tslib": "^1.9.0",
    "zone.js": "^0.8.25"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@angular/compiler-cli": "^4.4.6",
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.104",
    "canonical-path": "0.0.2",
    "concurrently": "^3.5.1",
    "jasmine-core": "~2.4.1",
    "lite-server": "^2.2.2",
    "lodash": "^4.17.5",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "^2.8.1"
  }

systemjs.config.js

(function (global) {
  System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/',
        "ngx-bootstrap":   "node_modules/ngx-bootstrap"
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        'app': 'app',
        // angular bundles
        '@angular/core':                          'npm:@angular/core/bundles/core.umd.js',
        '@angular/common':                        'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler':                      'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser':              'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic':      'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http':                          'npm:@angular/http/bundles/http.umd.js',
        '@angular/router':                        'npm:@angular/router/bundles/router.umd.js',
        '@angular/animations':                    'npm:@angular/animations/bundles/animations.umd.js',
        '@angular/animations/browser':            'npm:@angular/animations/bundles/animations-browser.umd.js',
        '@angular/platform-browser/animations':   'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
        '@angular/forms':                         'npm:@angular/forms/bundles/forms.umd.js',
        // other libraries
        '@ngx-translate/core':                    'npm:@ngx-translate/core/bundles/core.umd.js',
        '@angular/common/http':                   'npm:@angular/common/bundles/common-http.umd.js',
        '@ngx-translate/http-loader':             'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
        'rxjs':                                   'npm:rxjs',
        'moment':                                 'npm:moment',
        'tslib':                                  'npm:tslib/tslib.js',
        'jquery':                                 'npm:jquery/dist/jquery.min.js',
        'air-datepicker':                         'npm:air-datepicker/dist/js/datepicker.js',
        'ngx-intl-tel-input':                     'npm:ngx-intl-tel-input/ngx-intl-tel-input.umd.js',
        'ngx-bootstrap':                          'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.js',
        'google-libphonenumber':                  'npm:google-libphonenumber/dist/libphonenumber.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
          defaultExtension: 'js',
          meta: {
            './*.js': {
              loader: 'systemjs-angular-loader.js'
            }
          }
        },
        rxjs: {
            defaultExtension: 'js',
            main: 'Rx.js'
        },
        tslib: {
            defaultExtension: 'js'
        },
        jquery: {
            defaultExtension: 'js'
        },
        airdatepiker: {
            defaultExtension: 'js'
        },
        'moment': {
            main: 'moment.js',
            defaultExtension: 'js'
        },
        'ngx-intl-tel-input': {
            defaultExtension: 'js'
        },
        'google-libphonenumber': {
            defaultExtension: 'js'
        }
    }
  });
})(this);

app.module.ts 

import { BsDropdownModule } from 'ngx-bootstrap';

imports: [
      BsDropdownModule.forRoot(),
    ]

in console from Google Chrome it shows me 

GET http://localhost:3000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js/dropdown 404 (Not Found)
GET http://localhost:3000/traceur 404 (Not Found)

and i don't understand what is the problem, i tried to search on google and i didn't find similar problems, but dropdown folder in node_modules exists but is not in bundles it is in root of ngx-bootstrap folder. I will be grateful for your help Thank you very much

Upvotes: 1

Views: 1080

Answers (1)

Dan Vrajmas
Dan Vrajmas

Reputation: 93

I resolved the problem, i installed another dependent https://github.com/kondi0/ng4-intl-phone/tree/master/src/demo

Upvotes: 1

Related Questions