search

rosslavery / angular2-tag-input

Tag input component for Angular 2
45 stars 42 forks source link

Missing RxJS imports #13

Closed bobbybobby closed 7 years ago

bobbybobby commented 7 years ago

I run into a problem regarding RxJS operator do. I put a <rl-tag-input></rl-tag-input> component in my template, and loading the page gave me the following error.

error_handler.js:47 EXCEPTION: Uncaught (in promise): Error: Error in ./CapsulesNewComponent class CapsulesNewComponent - inline template:110:4 caused by: this.tagInputField.valueChanges.do is not a function
TypeError: this.tagInputField.valueChanges.do is not a function
    at TagInputComponent.ngOnInit (http://lvh.me:4200/main.bundle.js:62831:16)
    at Wrapper_TagInputComponent.ngDoCheck (/RlTagInputModule/TagInputComponent/wrapper.ngfactory.js:157:53)
    at DebugAppView.View_CapsulesNewComponent0.detectChangesInternal (/AppModule/CapsulesNewComponent/component.ngfactory.js:685:32)
    at DebugAppView.AppView.detectChanges (http://lvh.me:4200/main.bundle.js:57857:14)
    at DebugAppView.detectChanges (http://lvh.me:4200/main.bundle.js:57950:44)
    at DebugAppView.View_CapsulesNewComponent_Host0.detectChangesInternal (/AppModule/CapsulesNewComponent/host.ngfactory.js:29:19)
    at DebugAppView.AppView.detectChanges (http://lvh.me:4200/main.bundle.js:57857:14)
    at DebugAppView.detectChanges (http://lvh.me:4200/main.bundle.js:57950:44)
    at ViewRef_.detectChanges (http://lvh.me:4200/main.bundle.js:41449:20)
    at RouterOutlet.activate (http://lvh.me:4200/main.bundle.js:44957:42)ErrorHandler.handleError @ error_handler.js:47next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74NgZone.triggerError @ ng_zone.js:278onHandleError @ ng_zone.js:257ZoneDelegate.handleError @ zone.js:236Zone.runGuarded @ zone.js:131_loop_1 @ zone.js:412drainMicroTaskQueue @ zone.js:421
error_handler.js:52 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:52next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74NgZone.triggerError @ ng_zone.js:278onHandleError @ ng_zone.js:257ZoneDelegate.handleError @ zone.js:236Zone.runGuarded @ zone.js:131_loop_1 @ zone.js:412drainMicroTaskQueue @ zone.js:421

I fixed this by adding import 'rxjs/add/operator/do'; to the rxjs-operators.ts file that is imported by my application. I'm new to Typescript and angular2 and I'm a little bit lost when it comes to all this import stuff. However, do you think it would be possible for the import to be done within the RlTagInputModule module, so it becomes transparent when using the module ?

vteivans commented 7 years ago

Please add to the import to the example in readme.

// Import do operator:
import 'rxjs/add/operator/do';
// In one of your application NgModules
import {RlTagInputModule} from 'angular2-tag-input';

@NgModule({
  imports: [
    RlTagInputModule
  ]
})
export class YourModule {}

// In one of your component templates
<rl-tag-input [(ngModel)]="tags" placeholder="Testing placeholder"></rl-tag-input>
rosslavery commented 7 years ago

I will be fixing this in a new release today or tomorrow.

rosslavery commented 7 years ago

Should be fixed in latest release.