Using angular 2.0.1 (release) and ng2-file-upload 1.1.0 (latest version) I am getting the above error upon running this code. I am using jspm with systemjs to bundle my app (all fully up-to-date).
import {Component, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FileUploadModule} from 'ng2-file-upload';
@Component({
selector: 'uploader',
templateUrl: '/build/templates/uploader.html'
})
export class UploaderComponent {
uploader = new FileUploader({url: '/upload'});
hasBaseDropZoneOver = false;
fileOverBase(event) {
this.hasBaseDropZoneOver = event;
}
clearQueue() {
this.uploader.clearQueue();
}
}
console.log(FileUploadModule);
@NgModule({
imports: [CommonModule, FileUploadModule],
declarations: [UploaderComponent],
exports: [UploaderComponent]
})
export class UploaderModule {};
If I inspect the value of FileUploadModule it looks perfectly fine, that is it looks just like all the other modules I've inspected. I've got everything else in my app working but this part. What is "unexpected" about this module?
Full error:
Error: (SystemJS) Unexpected value 'FileUploadModule' imported by the module 'UploaderModule'(…)
Here is the relative part of FileUploadModule export that looks fine to me
var FileUploadModule = (function() {
function FileUploadModule() {}
FileUploadModule = __decorate([core_1.NgModule({
imports: [common_1.CommonModule],
declarations: [file_drop_directive_1.FileDropDirective, file_select_directive_1.FileSelectDirective],
exports: [file_drop_directive_1.FileDropDirective, file_select_directive_1.FileSelectDirective]
}), __metadata('design:paramtypes', [])], FileUploadModule);
return FileUploadModule;
}());
exports.FileUploadModule = FileUploadModule;
UPDATE: Inspired by this reverse issue I copied node_module/ng2-file-upload to the directory that this component is in and changed my import to be ...
import {FileUploadModule} from './ng2-file-upload/ng2-file-upload.js'
...and it worked! Any ideas? Cheers.
UPDATE 2 I tried importing it as a file rather than a module but leaving it in place, changed my import to this ...
import {FileUploadModule, FileUploader} from '../../../jspm_packages/npm/ng2-file-upload@1.1.0/ng2-file-upload';
...and I'm back to the error again.
I then symlinked in my project root as ng2-file-upload to ../../../jspm_packages/npm/ng2-file-upload@1.1.0/ng2-file-upload and changed my import to...
import {FileUploadModule, FileUploader} from '../../../ng2-file-upload/ng2-file-upload';
and it worked fine!
So I think jspm/systemjs knows that the direct path is actually an npm package and must try to import it differently than straight up as a file. And as a file it loads the module correctly.
Just for the record, since I didn't specify above, I am using a pure js solution (yes, I am bucking the trend, but not a Typescript fan).