Template parse errors: Can't bind to 'ngbTypeahead' since it isn't a known property of '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/[email protected]

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

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 { }