joebrinkman-earnin / ng2-typeahead

Autocomplete component for Angular 2
MIT License
32 stars 21 forks source link

error TS2307: Cannot find module 'ng2-Typeahead' #13

Open sanket360 opened 8 years ago

sanket360 commented 8 years ago

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);
mickeychu commented 8 years ago

I have the same problem. I'm using Angular 2.0.1 @brinkmanjg

avnkkishore commented 8 years ago

I am facing the same issue, I'am using Angular 2 RC5

ribsies commented 8 years ago

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';

chronic665 commented 8 years ago

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 { /**

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?)