Split is not defined

[calebeaires]

I have tried us this module, but I get the error above.

Angular 2.2 Angular Starter: https://github.com/preboot/angular2-webpack/ Split imported by vendor.ts ( import 'split.js/split';) with no errors!

VM40151:227 Uncaught ReferenceError: Split is not defined(…)
SplitDirective.build    @   split.directive.ts?7b3c:108
(anonymous function)    @   split.directive.ts?7b3c:16
SafeSubscriber.__tryOrUnsub @   VM40151:223
SafeSubscriber.next @   VM40151:172
Subscriber._next    @   VM40151:125
Subscriber.next @   VM40151:89
DebounceTimeSubscriber.debouncedNext    @   VM40549:98
dispatchNext    @   VM40549:114
AsyncAction._execute    @   VM40474:111
AsyncAction.execute @   VM40474:86
AsyncScheduler.flush    @   VM40476:36
ZoneDelegate.invokeTask @   zone.js?fad3:265
onInvokeTask    @   VM40145:229
ZoneDelegate.invokeTask @   zone.js?fad3:264
Zone.runTask    @   zone.js?fad3:154
ZoneTask.invoke @   zone.js?fad3:335
data.args.(anonymous function)  @   zone.js?fad3:970

split.directive.ts?7b3c:108

this.splitInstance = Split(elements, params);
this.addStyles();

SplitDirective.build @ split.directive.ts?7b3c:108

    function SplitDirective(el, renderer) {
        var _this = this;
        this.el = el;
        this.renderer = renderer;
        this.direction = 'horizontal';
        this.dragStart = new core_1.EventEmitter(false);
        this.drag = new core_1.EventEmitter(false);
        this.dragEnd = new core_1.EventEmitter(false);
        this.areas = [];
        this.build$ = new Subject_1.Subject();
        this.sub = this.build$.debounceTime(1).subscribe(function () { return _this.build(); });
    }

[bertrandg]

Split.js library add Split variable globally in the page and ng2-split just use it.

Type 'Split' inside your browser console, if you have 'Split is not defined' error messsage, Split.js is not imported correctly.

Try to add: <script src="node_modules/split.js/split.js"></script> to your index.html

[calebeaires]

I have done it. Split is globally on console too.

I have found that if I put import * as Split from "split.js/split" on your SplitDirective instead of define var Split:any, the code starts working.

It look like that on this webpack-starter Split global variable is not recognized when the diretive cames from a node_module.

[bertrandg]

Interesting, I will try using your starter tomorrow.

[calebeaires]

@bertrandg Have you found an solution? When I use import from Split global it works, but when I try to make npm run build the building modules breaks with this error: Cannot find module 'split.js/split'.

I am using th Angular 2 starter that call globals on vendor.ts

[bertrandg]

@calebeaires sorry for the delay! No, I've experiment this behavior but didn't find a way to make this works properly on all modules loaders.. I don't understand well how webpack import it.

Currently, I make it works using systemjs and angular-cli (https://github.com/bertrandg/ng2-split/blob/website-src/angular-cli.json). I will investigate more and let you know.

[bertrandg]

@calebeaires I have a bad and a good news for you. :)

• The bad one: I failed to find a way to make ng2-split/Split.js works great with your starter.

• And the good one: I coded a new library without other dependencies other that angular using css latest flexbox grid: https://github.com/bertrandg/angular-split

So, to make it works:

npm i angular-split --save

import { AngularSplitModule } from 'angular-split';

<split direction="horizontal">
    <split-area size="50">
        <p>Lorem ipsum dolor sit amet...</p>
    </split-area>
    <split-area size="50">
        <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
    </split-area>
</split>

I tested it with your starter and it works nicely.

It's still WIP, I will add documentation and more options soon but it works the same as this one which I will deprecated.

[ghost]

Hi,

I try to use angular-split with systemjs.

Do you know how to include in system config ?

thx

[hope4555]

maybe like this 'angular-split' : 'npm:angular-split/dist/bundles/angular-split.umd.js',