bougarfaoui / ui-carousel

🎨 Angular carousel Component 🔥
https://bougarfaoui.github.io/ui-carousel/
MIT License
79 stars 53 forks source link

Not running with RxJS 6+ #20

Open JLNNN opened 6 years ago

JLNNN commented 6 years ago

Hey, thanks for your great module! :)

With the latest update of RxJS this seems broken:

ERROR in ./node_modules/ui-carousel/dist/src/ui-carousel/ui-carousel.component.js
Module not found: Error: Can't resolve 'rxjs/Subject' in '/node_modules/ui-carousel/dist/src/ui-carousel'
 @ ./node_modules/ui-carousel/dist/src/ui-carousel/ui-carousel.component.js 4:16-39
 @ ./node_modules/ui-carousel/dist/index.js
 @ ./src/app/common/common.module.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts

ERROR in ./node_modules/ui-carousel/dist/src/ui-carousel/ui-carousel.component.js
Module not found: Error: Can't resolve 'rxjs/add/operator/throttleTime' in '/node_modules/ui-carousel/dist/src/ui-carousel'
 @ ./node_modules/ui-carousel/dist/src/ui-carousel/ui-carousel.component.js 5:0-41
 @ ./node_modules/ui-carousel/dist/index.js
 @ ./src/app/common/common.module.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts

Have a nice day & greetings from Germany! -- Julian

JLNNN commented 6 years ago

Update: It's working when installing npm i rxjs-compat and using these packages manually. Can you fix this so we don't have to edit our node_module files?

Example _/nodemodules/ui-carousel/dist/src/ui-carousel/ui-carousel.component.js lines 4 and 5:

var Subject_1 = require("rxjs-compat/Subject");
require("rxjs-compat/add/operator/throttleTime");
joscmw95 commented 6 years ago

This repo is not maintained for a rather long time now, it'd be best to just include the source as a component in your app, then you can choose not to use rxjs-compat since it adds quite a significant amount to your app size.

Aitthi commented 5 years ago

Change code in ui-carousel.component.ts

...
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/throttleTime';
...

this.subscriptions.add(this.nextSubject.throttleTime(this.speed).subscribe(() => {
    if (!this.fade) {
        this.slideLeft();
    } else {
        this.fadeLeft();
    }
}));
this.subscriptions.add(this.prevSubject.throttleTime(this.speed).subscribe(() => {
    if (!this.fade) {
        this.slideRight();
    } else {
        this.fadeRight();
    }
}));

...
############
to =>
############
...

import {Observable, Subject, Subscription} from 'rxjs';
import { throttleTime } from 'rxjs/operators';

...

this.subscriptions.add(this.nextSubject.pipe(throttleTime(this.speed)).subscribe(() => {
    if (!this.fade) {
        this.slideLeft();
    } else {
        this.fadeLeft();
    }
}));
this.subscriptions.add(this.prevSubject.pipe(throttleTime(this.speed)).subscribe(() => {
    if (!this.fade) {
        this.slideRight();
    } else {
        this.fadeRight();
    }
}));

...