antonybudianto / angular-starter

:star: Gulp Angular Starter using TypeScript (Updated to 4.4.3)

Home Page:https://antonybudianto.github.io/angular-starter/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with nodemodules imports

vibesharing opened this issue · comments

Hi,

I have issues when trying to use node modules that don't have index.js barrels.

For example I tried to use both ng2-dragula ng2-translate and in both cases I had this issue:

(index):45 Error: (SystemJS) Unexpected token <(…)
(anonymous function) @ (index):45
ZoneDelegate.invoke @ zone.js:203
Zone.run @ zone.js:96
(anonymous function) @ zone.js:462
ZoneDelegate.invokeTask @ zone.js:236
Zone.runTask @ zone.js:136
drainMicroTaskQueue @ zone.js:368
ZoneTask.invoke @ zone.js:308

you cna find dragula here: https://github.com/valor-software/ng2-dragula
I set it up like this (e.g. ng2 Dragula):

systemjs.conf.js:

var map = {
...
'ng2-dragula': 'node_modules/ng2-dragula',
};

...
var packages = {
...
'ng2-dragula': { defaultExtension: 'js' },
}

app.module.ts:

import { DragulaModule } from 'ng2-dragula/ng2-dragula';
...
imports: [
...
DragulaModule,
]
...

Is there something that I am missing or misusing?

Thanks for your help !

I already followed your structure for few differents sections so far thanks for your help:
--> https://github.com/vibesharing/akko

I'd recommend trying https://github.com/antonybudianto/angular-webpack-starter if you don't like configuring systemjs per new package you add 😄

// packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': {
            defaultExtension: 'js'
        },
        'test': {
            defaultExtension: 'js'
        },
        'rxjs': {
            defaultExtension: 'js'
        },
        'ng2-dragula': {
            defaultExtension: 'js'
        }
    };

    var paths = {
        'dragula': 'node_modules/dragula/dist/dragula.min.js',
        'ng2-dragula/ng2-dragula': 'node_modules/ng2-dragula/ng2-dragula'
    };

    // List npm packages here
    var npmPackages = [
        '@angular',
        'rxjs',
        'lodash',
        'ng2-dragula'
    ];

ng2-dragula is a bit tricky in configuration because they don't use peerDependency for dragula