模板解析错误：无法绑定到'ngbTypeahead'，因为它不是'input的已知属性

Question

Does not work ngbTypeahead . The console returns the following message:

    Error: Template parse errors:
Can't bind to 'ngbTypeahead' since it isn't a known property of 'input'. ("                   <input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ERROR ->][ngbTypeahead]="search"/>
          <hr>

"): ng:///ProductModule/UserProductsComponent.html@86:100
    at syntaxError (compiler.js:485)
    at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24668)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34596)
    at compiler.js:34497
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34497)
    at compiler.js:34367
    at Object.then (compiler.js:474)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34366)

file user-products.component.html in which it is placed:

    <div class="jumbotron">
     <input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search"/>
</div>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,  ReactiveFormsModule } from '@angular/forms';
import { RouterModule,  Routes} from '@angular/router';
import { AppComponent } from './app.component';   
import { UserService } from './user.service';
import { ProductModule } from './product/product.module'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// ... 

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    NgbModule.forRoot(), 
    ReactiveFormsModule,
    BrowserAnimationsModule,  
    ProductModule,
    RouterModule.forRoot(routes )
    // ... 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

class user-products.component.ts in which the method is search:

import { User, UserType } from '../../model';
import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { FormsModule, FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthService } from '../../auth.service';
import { Product, ProductType } from './module-product';  
import { Observable } from 'rxjs/'; 
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
// ...
const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Islands'];

@Component({
  selector: 'app-user-products',
  templateUrl: './user-products.component.html',
  styleUrls: ['./user-products.component.css']
})

export class UserProductsComponent implements OnInit {

  @Input()
  product: Product;
  user: User;
  UserType = UserType;
  product_name: string;
  product_type: ProductType;
  ProductType = ProductType;
  product_desc: string;
  produktForm: FormGroup;
  products: Product; 
  products_: any;
  users$: Observable<User[]>; 

  public model: any;

  constructor(private fb: FormBuilder, private route: ActivatedRoute, private router: Router ) {  }

 search = (text$: Observable<string>) => text$
  .debounceTime(200)
  .distinctUntilChanged()
  .map(term => term.length < 2 ? []
   : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))

  ngOnInit() {
    this.produktForm = this.fb.group({
      product_name: this.product_name, 
      product_type: this.product_type, 
      product_desc: this.product_desc 
    });
  }
  // ...
}

version: @ng-bootstrap/ng-bootstrap@1.1.0

I do not know how to correct the error.

file .angular-cli.json :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "test-panel"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/ngx-toastr/toastr.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

@Niladri I updated the code, but the error still occurs.

The file .angular-cli.json only contains a different configuration for libraries (but the bootstrap files are there for me), but everything else is the same as in @Niladri.

Answer 1

You are using a wrong import in your app.module . You are currently importing from ngx-bootstrap/typeahead which is a different library for bootstrap 3.

But according to the documentation you should be using ng-bootstrap package not from ngx-bootstrap to use the directive [ngbTypeahead] . So you need to import the below NgbModule module like below code in app.module

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports : [
        //...
        NgbModule.forRoot(),
    ],
    //...
})
export class AppModule {}

Now you can using typeahead directive in your component like below

<input  id="typeahead-focus"  type="text"  class="form-control" [(ngModel)]="user"  [ngbTypeahead]="search" (focus)="focus$.next($event.target.value)" (click)="click$.next($event.target.value)" />

Working demo

https://stackblitz.com/angular/rdkongmjovr?file=app%2Ftypeahead-basic.html

Official documentation

https://ng-bootstrap.github.io/#/components/typeahead/examples

Edit : Here is the complete code which is working for me . For simplicity I have commented out few service calls using AuthService .

.angular-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "./app/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

package.json

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

typeaheaddemo.component.ts

import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import {Subject} from 'rxjs/Subject';
import { Component,ViewChild,OnInit,Input, } from '@angular/core';
import {Observable} from 'rxjs';
import {FormGroup,FormControl,FormBuilder} from '@angular/forms'
import {ActivatedRoute,Route,Router} from  '@angular/router'
import {ProductType ,Product,User} from '../producttype'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

const states = ['Alabama', 'Alaska', 'American Samoa',  'California', 'Colorado', 'Connecticut', 'Delaware',     
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',  'North Carolina', 'North Dakota',    
  'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',  'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];


@Component({
  selector: 'app-user-products',
  templateUrl: './typeaheaddemo.component.html',
  styleUrls: ['./typeaheaddemo.component.css']
})

export class TypeaheaddemoComponent implements OnInit {

  @Input()
  product: Product;
  user: User;
  //UserType = UserType;
  product_name: string;
  product_type: ProductType;
  //ProductType = ProductType;
  product_desc: string;

  produktForm: FormGroup;
  products: Product[];
  userObj: any;
  expid: string;
  id: any;
  products_: any;
  users$: Observable<User[]>;

  model: any;
  @ViewChild('instance') instance: NgbTypeahead;
   focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200).distinctUntilChanged()
      .merge(this.focus$)
      .merge(this.click$.filter(() => !this.instance.isPopupOpen()))
      .map(term => (term === '' ? states : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10));

  constructor(private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router) { }


  ngOnInit() {
    //this.userObj = this.authService.currentUser;
    //onst userid = this.userObj.userid;

    this.produktForm = this.fb.group({
      product_name: this.product_name, 
      product_type: this.product_type,
      product_desc: this.product_desc 
    });
  }

}

typeaheaddemo.component.html

<label for="typeahead-basic">Search for a state:</label>
<input  id="typeahead-focus"  type="text"  class="form-control" [(ngModel)]="user"  [ngbTypeahead]="search" (focus)="focus$.next($event.target.value)" (click)="click$.next($event.target.value)" #instance="ngbTypeahead" />
<hr>
<pre>Model: {{ model | json }}</pre>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { TypeaheaddemoComponent } from './typeaheaddemo/typeaheaddemo.component'

@NgModule({
  declarations: [
    AppComponent,
    TypeaheaddemoComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Make sure that you have imported FormsModule,ReactiveFormsModule in your app.module otherwise ngModel and Formbuilder would not work

Answer 2

I had several modules. Should be set in the main method NgbModule.forRoot() , - app.module.ts , and in the child NgbModule .

test.module.ts:

import { NgModule } from '@angular/core';
// ...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// ... 

@NgModule({
  imports: [

    FormsModule,
    HttpModule,
    ReactiveFormsModule, 
    NgbModule,
    RouterModule.forChild(routes)
  ],

  declarations: [
   // ..
  ],

  providers: [ProductsService],

  exports: [ // ..
    ]
})
export class ProductModule { }