brinkmanjg
error TS2307: Cannot find module 'ng2-Typeahead'
Hi
I am keep getting error after following steps mentioned in readme file-
app/app.module.ts(7,27): error TS2307: Cannot find module 'ng2-Typeahead'.
Below is my code-
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
//import { Typeahead } from './ng2-Typeahead';
import { Typeahead } from 'ng2-Typeahead';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, Typeahead ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>My First Angular App</h1>
<typeahead
[(ngModel)]="selectedFruit"
[list]="fruits"
[searchProperty]="'searchText'" [displayProperty]="'name'"
[maxSuggestions]="2"
(suggestionSelected)="fruitSelected($event)"
placeholder="Begin typing a fruit">
</typeahead>
`
})
export class AppComponent {
fruits: any[] = [
{
id: 1,
name: "1 - Apple",
searchText: "apple"
},
{
id: 2,
name: "2 - Orange",
searchText: "orange"
},
{
id: 3,
name: "3 - Banana",
searchText: "banana"
}
];
selectedFruit: any = this.fruits[0];
public fruitSelected(fruit) {
this.selectedFruit = fruit;
}
}
systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ng2-Typeahead': 'npm:ng2-Typeahead',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-Typeahead': { main: './index.js', defaultExtension: 'js' }
}
});
})(this);
this needs to be updated to fix its own module location. For now we got around this issue by importing directly to the file that is needed
import { Typeahead } from '../../../node_modules/ng2-typeahead/src/ng2-typeahead';
The package is missing some .d.ts file to allow the Typescript compiler to work.
As a workaround, create the following files in 'node_modules/ng2-typeahead/
index.d.ts
export declare const TYPEAHEAD_CONTROL_VALUE_ACCESSOR: any; export * from './lib/ng2-typeahead';
lib/ng2-typeahead.d.ts
import { EventEmitter, OnInit } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; export declare const TYPEAHEAD_CONTROL_VALUE_ACCESSOR: any; export declare class Typeahead implements OnInit, ControlValueAccessor { /** * The complete list of items. */ list: any[]; /** * Input element placeholder text. */ placeholder: string; /** * The property of a list item that should be used for matching. */ searchProperty: string; /** * The property of a list item that should be displayed. */ displayProperty: string; /** * The maximum number of suggestions to display. */ maxSuggestions: number; /** * Event that occurs when a suggestion is selected. */ suggestionSelected: EventEmitter<any>; /** * Handle to the input element. */ private inputElement; /** * The input element's value. */ private input; /** * The typeahead element's value. This element is displayed behind the input element. */ private typeahead; /** * The previously entered input string. */ private previousInput; /** * The filtered list of suggestions. */ private suggestions; /** * Indicates whether the suggestions are visible. */ private areSuggestionsVisible; /** * The currently selected suggestion. */ private selectedSuggestion; /** * The active (highlighted) suggestion. */ private activeSuggestion; /** * Creates and initializes a new typeahead component. */ constructor(); /** * Implement this interface to execute custom initialization logic after your * directive's data-bound properties have been initialized. * * ngOnInit is called right after the directive's data-bound properties have * been checked for the first time, and before any of its * children have been checked. It is invoked only once when the directive is * instantiated. */ ngOnInit(): void; /** * Placeholder for a callback which is later provided by the Control Value Accessor. */ private onTouchedCallback; /** * Placeholder for a callback which is later provided by the Control Value Accessor. */ private onChangeCallback; /** * Get accessor. */ /** * Set accessor including call the onchange callback. */ value: any; /** * From ControlValueAccessor interface. */ writeValue(value: any): void; /** * From ControlValueAccessor interface. */ registerOnChange(fn: any): void; /** * From ControlValueAccessor interface. */ registerOnTouched(fn: any): void; /** * Called when a keydown event is fired on the input element. */ inputKeyDown(event: KeyboardEvent): void; /** * Sets the active (highlighted) suggestion. */ setActiveSuggestion(suggestion: any): void; /** * Gets the index of the active suggestion within the suggestions list. */ getActiveSuggestionIndex(): number; /** * Gets the index of an object in a list by matching a property value. */ indexOfObject(array: any[], property: string, value: string): number; /** * Called when a keyup event is fired on the input element. */ inputKeyUp(event: KeyboardEvent): void; /** * Called when a focus event is fired on the input element. */ inputFocus(event: FocusEvent): void; /** * Called when a blur event is fired on the input element. */ inputBlur(event: Event): void; /** * Called when a mouseover event is fired on a suggestion element. */ suggestionMouseOver(suggestion: any): void; /** * Called when a mousedown event is fired on a suggestion element. */ suggestionMouseDown(suggestion: any): void; /** * Called when a mouseout event is fired on the suggestions element. */ suggestionsMouseOut(event: MouseEvent): void; /** * Fills the suggestions list with items matching the input pattern. */ populateSuggestions(): void; /** * Sets the typeahead input element's value based on the active suggestion. */ populateTypeahead(): void; /** * Selects a suggestion. */ selectSuggestion(suggestion: any): void; /** * Blurs the input element in order to "lock" the value and prevent partial editing. */ blurInputElement(): void; /** * Indicates whether a suggestion has been selected. */ hasSelection(): boolean; }
then you can use a clean import { Typeahead } from 'ng2-typeahead';
Still feels more dirty than ribsies solution but I like it more than directly referencing the source typescript file. With this, you can at least keep your imports clean, until the package delivers the .d.ts file itself (which is probably just a case of missing files in the upload?)
