Ngx-chips: systemjs usage issues

[ckemmler]

with a system.config.js that looks reasonable:

paths: {
// paths serve as alias
    'npm:': '/node_modules/'
},
map {
...
    'ng2-tag-input':              'npm:ng2-tag-input/dist'
...
}

and

packages {
...
    'ng2-tag-input': { main: 'index.js', defaultExtension: 'js' }
...
}

I get the following errors:

zone.js:1382 GET http://localhost/node_modules/ng2-tag-input/dist/modules/components/tag-input-form.js 404 (Not Found)scheduleTask @ zone.js:1382ZoneDelegate.scheduleTask @ zone.js:245Zone.scheduleMacroTask @ zone.js:171(anonymous function) @ zone.js:1405send @ VM883:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:518(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:232onInvoke @ core.umd.js:6220ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ core.umd.js:6211ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost/node_modules/ng2-tag-input/dist/modules/components/icon.js 404 (Not Found)scheduleTask @ zone.js:1382ZoneDelegate.scheduleTask @ zone.js:245Zone.scheduleMacroTask @ zone.js:171(anonymous function) @ zone.js:1405send @ VM883:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:518(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:232onInvoke @ core.umd.js:6220ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ core.umd.js:6211ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost/node_modules/ng2-tag-input/dist/modules/components.js 404 (Not Found)scheduleTask @ zone.js:1382ZoneDelegate.scheduleTask @ zone.js:245Zone.scheduleMacroTask @ zone.js:171(anonymous function) @ zone.js:1405send @ VM883:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:518(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:232onInvoke @ core.umd.js:6220ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ core.umd.js:6211ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost/node_modules/ng2-tag-input/dist/modules/components/tag-input.style.scss.js 404 (Not Found)scheduleTask @ zone.js:1382ZoneDelegate.scheduleTask @ zone.js:245Zone.scheduleMacroTask @ zone.js:171(anonymous function) @ zone.js:1405send @ VM883:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:518(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:232onInvoke @ core.umd.js:6220ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ core.umd.js:6211ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost/node_modules/ng2-tag-input/dist/modules/components/tag-input.template.html.js 404 (Not Found)scheduleTask @ zone.js:1382ZoneDelegate.scheduleTask @ zone.js:245Zone.scheduleMacroTask @ zone.js:171(anonymous function) @ zone.js:1405send @ VM883:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:518(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:232onInvoke @ core.umd.js:6220ZoneDelegate.invoke @ zone.js:231Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265onInvokeTask @ core.umd.js:6211ZoneDelegate.invokeTask @ zone.js:264Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost/node_modules/ng2-tag-input/dist/modules/components/tag-input-form/tag-input-form.template.html.js 404 (Not Found)

I tried a whole lot of variations, without success. It seems to be really hard to get the logic of systemjs, btw. Any pointers on module formats and what ng2-tag-input is using?

I'm using:
"systemjs": "0.19.27",
"ng2-tag-input": "^0.3.7",

[Gbuomprisco]

Hi @ckemmler,

can you try a config like this?

var map = {
      // packages
    'ng2-tag-input': '/node_modules/ng2-tag-input'
  };
  var packages = {
    // packages
    'ng2-tag-input': { main: 'dist/ng2-tag-input.bundle.js', defaultExtension: 'js' }
  };

Absolutely agree on system.js being obscure, many users have been reporting issues in configuring my packages. Maybe it's my configurations wrong, but webpack works like a charm :)

[rolandoldengarm]

I'm so happy Angular-CLI switched from SystemJS to Webpack. No need to do anything when adding a new module. Highly recommended.