django - 找不到 ng2-bootstrap 下拉菜单

Question

我的 Angular 应用程序在包含 ng2-boostrap 时遇到问题。我在 chrome 控制台中不断收到此错误:

GET http://127.0.0.1:8000/ng/node_modules/ng2-bootstrap/dropdown.js 404 (Not Found)

看看 ng2-bootstrap 模块如何存储在我的目录中，在我看来，zone.js 应该尝试加载此模块:

http://127.0.0.1:8000/ng/node_modules/ng2-bootstrap/dropdown/dropdown.module.js

这是我的 app.module.ts 导入:

import { DropdownModule, TabsModule } from 'ng2-bootstrap';
/* Stuff */

还有我的 systemjs.config

    /**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {


var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'npm:@angular',
    'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    'rxjs':                       'npm:rxjs',
    // ng2-bootstrap
    'moment':                     'npm:moment',
    'ng2-bootstrap':              'npm:ng2-bootstrap',
    'ng2-charts':                 'npm:ng2-charts',
  };

  var packages = {
    'app':                        { main: './app/main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    // ng2-bootstrap
    'ng2-bootstrap':              { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
    'moment':                     { main: 'moment.js', defaultExtension: 'js' },
    'ng2-charts': {
        main: 'bundles/ng2-charts.umd.js',
        defaultExtension: 'js'
      }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    baseURL: '/ng/',
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

还有我的 package.json:

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "2.4.3",
    "@angular/compiler": "2.4.3",
    "@angular/core": "2.4.3",
    "@angular/forms": "2.4.3",
    "@angular/http": "2.4.3",
    "@angular/platform-browser": "2.4.3",
    "@angular/platform-browser-dynamic": "2.4.3",
    "@angular/router": "3.4.3",
    "@types/lodash": "4.14.50",
    "angular-calendar": "0.6.2",
    "angular-in-memory-web-api": "~0.2.4",
    "angular2-datatable": "0.5.2",
    "angular2-ladda": "^1.0.6",
    "angular2-moment": "^1.1.0",
    "angular2-toaster": "2.0.0",
    "chart.js": "^2.3.0",
    "core-js": "^2.4.0",
    "dragula": "^3.7.2",
    "moment": "2.17.1",
    "ng2-bootstrap": "^1.3.2",
    "ng2-charts": "^1.5.0",
    "ng2-dragula": "1.3.0",
    "ng2-select": "^1.2.0",
    "reflect-metadata": "0.1.9",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.0.10",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.15.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46",
    "@types/jasmine": "^2.5.36"
  },
  "repository": {}
}

您知道为什么 ng2-bootstrap 下拉菜单未加载吗？

Answer 1

我在我的解决方案中发现了问题。我们正在集成一个布局，一些组件的导入写为:

import { DropdownModule } from 'ng2-bootstrap/dropdown';

所以我们将它们更改为:

import { DropdownModule } from 'ng2-bootstrap';

它确实解决了问题!