找不到模块＆＃39; ng2-typeahead＆＃39;

Question

我正在尝试导入Typeahead组件并获取 cannot find a module 'ng2-typeahead'错误。

我有ASP.NET Core应用程序，从这里下载了这个： https://www.npmjs.com/package/generator-aspnetcore-angular2

并使用此处的教程Typeahead：

https://www.npmjs.com/package/ng2-typeahead

我做了什么：

1. 在package.json中添加：

"ng2-typeahead": "1.0.0",

1. 在system.congfig.js中添加了代码：

   paths: { // paths serve as alias 'npm:': 'node_modules/' }, var map = { ....
'ng2-typeahead': 'npm:ng2-typeahead', }; var packages = {
'ng2-typeahead': { main: 'ng2-typeahead.js', defaultExtension: 'js' } };

2. 通过导入Typeahead文件中的app.module.ts来获取错误：

import { Typeahead } from 'ng2-typeahead';

我做错了什么或遗失了什么？谢谢你的帮助。

Answer 1

您可以尝试此解决方法 -

首先，将ng2-typeahead.ts复制到您的app文件夹中。

在app.module.ts中，从ng2-Typeahead导入，如下所示 -

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

在您的组件中使用Typeahead，如下所示 -

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

输出结果：

看看这是否有帮助。