build issue with JSPM - Githubissues

bautistaaa commented 7 years ago

I am currently using JSPM w/ angular 2.4.4

Getting this error during runtime.

Error: Module http://localhost:3000/jspm_packages/npm/angular-2-dropdown-multiselect@0.4.0/src/multiselect-dropdown.js interpreted as cjs module format, but called System.register

package.json

{
  "name": "ng2-seed",
  "version": "0.0.1",
  "scripts": {
    "clean": "gulp clean",
    "compile-prod": "gulp compile --env prod",
    "compile-dev": "gulp compile --env dev",
    "compile-aot": "gulp compile:aot --env aot",
    "serve-fe": "gulp"
  },
  "jspm": {
    "dependencies": {
      "@angular/common": "npm:@angular/common@~2.4.3",
      "@angular/compiler": "npm:@angular/compiler@~2.4.3",
      "@angular/core": "npm:@angular/core@~2.4.3",
      "@angular/forms": "npm:@angular/forms@~2.4.3",
      "@angular/http": "npm:@angular/http@~2.4.3",
      "@angular/platform-browser": "npm:@angular/platform-browser@~2.4.3",
      "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@~2.4.3",
      "@angular/router": "npm:@angular/router@~3.4.0",
      "angular-2-dropdown-multiselect": "npm:angular-2-dropdown-multiselect@^0.4.0",
      "angular2-datatable": "npm:angular2-datatable@^0.5.2",
      "highcharts": "npm:highcharts@4.2.5",
      "jquery": "npm:jquery@^3.1.1",
      "moment": "npm:moment@^2.13.0",
      "ng2-bootstrap": "npm:ng2-bootstrap@^1.2.6",
      "ng2-dropdown-multiselect": "npm:ng2-dropdown-multiselect@^1.1.1",
      "ng2-highcharts": "npm:ng2-highcharts@^0.6.5",
      "raphael": "npm:raphael@^2.2.7",
      "reflect-metadata": "npm:reflect-metadata@^0.1.9",
      "rxjs": "npm:rxjs@^5.0.2",
      "treant-js": "npm:treant-js@^1.0.1",
      "underscore": "npm:underscore@^1.8.3",
      "zone.js": "npm:zone.js@^0.7.4"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4",
      "typescript": "npm:typescript@~2.0.10"
    }
  },
  "dependencies": {
    "@angular/common": "~2.4.3",
    "@angular/compiler": "~2.4.3",
    "@angular/compiler-cli": "~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/platform-server": "~2.4.3",
    "@angular/router": "~3.4.0",
    "connect-history-api-fallback": "^1.3.0",
    "core-js": "^2.4.1",
    "jspm": "^0.16.48",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "systemjs": "^0.19.41",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.36",
    "@types/jquery": "^2.0.38",
    "@types/node": "^6.0.56",
    "angular-2-dropdown-multiselect": "^0.4.0",
    "angular2-datatable": "^0.5.2",
    "autoprefixer": "^6.6.0",
    "browser-sync": "^2.18.5",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.3.2",
    "gulp-env": "^0.4.0",
    "gulp-html-replace": "^1.6.2",
    "gulp-inline-ng2-template": "^4.0.0",
    "gulp-jshint": "^2.0.4",
    "gulp-postcss": "^6.2.0",
    "gulp-preprocess": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.1.1",
    "gulp-sass": "^3.0.0",
    "gulp-size": "^2.1.0",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-tslint": "^7.0.1",
    "gulp-typescript": "^3.1.3",
    "highcharts": "^5.0.6",
    "http-server": "^0.9.0",
    "jquery": "^3.1.1",
    "jshint": "^2.9.4",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "moment": "^2.13.0",
    "ng2-bootstrap": "^1.2.6",
    "ng2-highcharts": "^0.6.5",
    "path": "^0.12.7",
    "raphael": "^2.2.7",
    "require-dir": "^0.3.1",
    "rollup": "^0.40.0",
    "rollup-plugin-commonjs": "^7.0.0",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "run-sequence": "^1.2.2",
    "treant-js": "^1.0.1",
    "tslint": "^4.1.0",
    "typescript": "~2.0.10",
    "yargs": "^6.5.0"
  }
}

Any help would be great!

bautistaaa commented 7 years ago

I can get past this by moving your src code directly into my project but then I get the error below upon selecting an item

self.parentView.context.onChange is not a function

nicholasguyett commented 7 years ago

The original error should now be fixed. However the onChange error looks like you referenced a function that you have not declared.

The context object refers to your component, so you need either remove the reference to the function or implement it in the component whose template you've added this to.

softsimon / ngx-bootstrap-multiselect

build issue with JSPM #64