getting issue Can't bind to 'property' since it isn't a known property of 'tagify'. version 16.1.1

[dineshghule321]

Hi, I’m encountering an issue: “Can't bind to 'settings' since it isn't a known property of 'tagify'.” This error occurs with the settings, whitelist, and readOnly properties. I’ve followed all the steps correctly, but the problem persists.

my app is as below versions

[Brakebein]

Can you share some relevant code, please?

[dineshghule321]

Hello @Brakebein Thank you for the reply

I am using version 16.1.1

I have shared module file where I added import and export for

import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { SafeHtmlPipe } from '../sheared/pipes/safe-html.pipe';
import { TagifyModule } from 'ngx-tagify';

@NgModule({
  declarations: [
    SafeHtmlPipe,
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    TagifyModule
  ],
  exports: [
    FormsModule,
    ReactiveFormsModule,
    SafeHtmlPipe,
    TagifyModule
  ],
  providers: [
  ]
})
export class SharedModule { }```

I have another moduel box Module whare I imported Shared Module

```import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../shared/shared.module';
import { BoxRoutingModule } from './box-routing.module';
import { BoxComponent } from '../../main/gbox/box.component';
import { PostboxComponent } from './postbox/postbox.component';
import { BoxMainComponent } from './box-main/box-main.component';
import { BoxHeaderComponent } from './box-header/box-header.component';
import { BoxCategoryComponent } from './box-category/box-category.component';
import { BoxHistoryComponent } from './box-history/box-history.component';
import { BoxFavouritesComponent } from './box-favourites/box-favourites.component';
@NgModule({
  declarations: [
    BoxComponent,
    PostboxComponent,
    BoxMainComponent,
    BoxHeaderComponent,
    BoxCategoryComponent,
    BoxHistoryComponent,
    BoxFavouritesComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    BoxRoutingModule
  ]
})
export class BoxModule { }```

In this box Module I have Header Component

BoxHeaderComponent

TS File

```import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { FormGroup, UntypedFormBuilder } from '@angular/forms';
import { TagData, TagifySettings } from 'ngx-tagify';
import { BehaviorSubject, Subscription } from 'rxjs';
import { BoxService } from 'src/app/sheared/box.service';

@Component({
  selector: 'app-box-header',
  templateUrl: './box-header.component.html',
  styleUrls: ['./box-header.component.scss']
})
export class BoxHeaderComponent implements OnInit, OnDestroy {
  /******************** tags settings ***************************/
  tagsData: TagData[] = [];
  settings: TagifySettings = {
    placeholder: 'Start typing...',
    blacklist: [],
    callbacks: {
      click: (e) => {
        //console.log(e.detail); 
      }
    }
  };
  whitelist$ = new BehaviorSubject<string[]>([]);
  readonly = false;
  //disabled = false;

  private subscription: Subscription;
  /******************** tags settings ***************************/
  boxDocumentForm: FormGroup;
  constructor(public boxService: BoxService, protected _formBuilder: UntypedFormBuilder) { }

  ngOnInit(): void {
    this.boxDocumentForm = this._formBuilder.group({
      searchTags: [null],
    });
    this.tagsInputSubscribe();
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  tagsInputSubscribe() {
    this.subscription = this.boxService.fetchSuggestedKeywords().subscribe(
      (data) => {
        if (data['errCode'] == 'success') {
          let finalData = JSON.parse(data['data']);
          let language = 'eng';
          let keywordFound = [...finalData].map((item) => {
            language = item?.language;
            return item?.tagName;
          })
          this.whitelist$.next(keywordFound);
        }
      },
      (error) => {
        //console.error('Error occurred:', error);
      }
    );
  }
}```

HTML Template

```<form autocomplete="off" role="form" [formGroup]="boxDocumentForm">
          <div class="form-group has-feedback has-search searchBar">
            <span class="glyphicon glyphicon-search form-control-feedback searchIcon"></span>
            <!-- <input type="text" class="form-control placeHolderSearch" placeholder="Keyword Search"> -->
            <tagify [(ngModel)]="tagsData" inputClass="form-control" name="searchTags"
              [settings]="settings" [whitelist]="whitelist$" [readonly]="readonly"
              (tInput)="boxService.searchKeywords($event,'english')"></tagify>
          </div>
        </form>```

        After run ng server I get below compile error in terminal

   ```Error: src/app/main/box/box-header/box-header.component.html:20:88 - error NG8002: Can't bind to 'settings' since it isn't a known property of 'tagify'.

20             <tagify [(ngModel)]="tagsData" inputClass="form-control" name="searchTags" [settings]="settings"
                                                                                          ~~~~~~~~~~~~~~~~~~~~~

  src/app/main/box/box-header/box-header.component.ts:8:16
    8   templateUrl: './box-header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BoxHeaderComponent.

Error: src/app/main/box/box-header/box-header.component.html:21:15 - error NG8002: Can't bind to 'whitelist' since it isn't a known property of 'tagify'.

21               [whitelist]="whitelist$" [readonly]="readonly" (tInput)="boxService.searchKeywords($event,'english')">
                 ~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/main/box/box-header/box-header.component.ts:8:16
    8   templateUrl: './box-header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BoxHeaderComponent.

Error: src/app/main/box/box-header/box-header.component.html:21:40 - error NG8002: Can't bind to 'readOnly' since it isn't a known property of 'tagify'.

21               [whitelist]="whitelist$" [readonly]="readonly" (tInput)="boxService.searchKeywords($event,'english')">
                                          ~~~~~~~~~~~~~~~~~~~~~

  src/app/main/box/box-header/box-header.component.ts:8:16
    8   templateUrl: './box-header.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BoxHeaderComponent.

✖ Failed to compile.

[Brakebein]

Since you are using Angular v14, you might want to try v14 of this library. Because v16.1.1 is compiled against Angular v16. Apart from this, I don't see any mistakes at first sight.

[dineshghule321]

@Brakebein Thank you

I just tried with v14 and I am using rxjs version 6.6.7

I got below errors

/src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
19 │ @import "~ngx-tagify/styles/tagify";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles.scss 19:9  root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
19 │ @import "~ngx-tagify/styles/tagify";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles.scss 19:9  root stylesheet

./node_modules/ngx-tagify/fesm2020/ngx-tagify.mjs:141:21-30 - Error: export 'takeUntil' (imported as 'takeUntil') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrame, animationFrameScheduler, asap, asapScheduler, async, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queue, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

./node_modules/ngx-tagify/fesm2020/ngx-tagify.mjs:185:4-16 - Error: export 'throttleTime' (imported as 'throttleTime') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrame, animationFrameScheduler, asap, asapScheduler, async, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queue, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

./node_modules/ngx-tagify/fesm2020/ngx-tagify.mjs:188:8-17 - Error: export 'takeUntil' (imported as 'takeUntil') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrame, animationFrameScheduler, asap, asapScheduler, async, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queue, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

./node_modules/ngx-tagify/fesm2020/ngx-tagify.mjs:193:26-35 - Error: export 'takeUntil' (imported as 'takeUntil') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrame, animationFrameScheduler, asap, asapScheduler, async, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queue, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

✖ Failed to compile.

[Brakebein]

Ah, the tilde import isn't supported anymore since Angular v13, but it was only fixed in this library within the last releases. Can't you just upgrade to Angular v16. Otherwise, I would need to apply this fix to this old version as well.

[dineshghule321]

@Brakebein Thank you for the information.

I will upgrade to version 16 and check the issue again.

[dineshghule321]

@Brakebein

I attempted to upgrade my project to Angular version 16. However, I encountered compatibility issues with other packages that are not yet supported by Angular 16. Consequently, I have reverted the changes to continue working with an older version of Angular.

Could you please provide a fix or solution that is compatible with the older Angular version?

[Brakebein]

I just released 14.0.1, which should resolve the issue.

If not already done, you also need to add the following to your angular.json:

"stylePreprocessorOptions": {
  "includePaths": ["node_modules"]
},

[dineshghule321]

@Brakebein Thank you.

The issue has been resolved, and the errors have been successfully addressed.