无法找到模块' ./ in-memory-data-service'为Angular2的英雄之旅

时间:2016-10-05 14:51:10

标签: angular typescript angular2-http

我正在尝试通过Angular2英雄应用程序之旅,并遇到Http section of the tutorial上的错误。

起初我收到错误:

Cannot find module 'angular2-in-memory-web-api'

但使用information from this question修正了此问题。

然而,在同一步骤中,我也收到以下错误:

app/app.module.ts(10,38): error TS2307: Cannot find module './in-memory-data-service'.

我已经检查了三次,我相信我的in-memory-data-service.ts文件和我的app.module.ts文件与教程中列出的完全相同(在此特定时间点) 。

现在我的 in-memory-data-service.ts 文件如下所示:

CODE:

import { InMemoryDbService } from 'angular2-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
let heroes = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];
return {heroes};
  }
}

我的 app.module.ts 文件如下所示:

CODE:

import './rxjs-extensions';

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { HttpModule }           from '@angular/http';

//Imports for loading & configuring the in-memory web API
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data-service';

import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { routing }              from './app.routing';

@NgModule({
  imports:        [
                    BrowserModule,
                    FormsModule,
                    HttpModule,
                    InMemoryWebApiModule.forRoot(InMemoryDataService),
                    routing
                  ],
  declarations:   [
                    AppComponent,
                    DashboardComponent,
                    HeroDetailComponent,
                    HeroesComponent
                  ],
  providers:      [
                    HeroService
                  ],
bootstrap:        [ AppComponent ]
})

export class AppModule {
}

我不确定这是否是由于package.json或systemjs.config中的某种依赖关系设置得不合适,或者是否有一个简单的错误我是帮助

修改

我的 systemjs.config.js 文件如下所示:

CODE:

(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',
},
// 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'
  }
}
});
})(this);

我的文件结构目前如下所示:

文件结构:

app/app.module.ts
app/in-memory-data-service.ts

index.html
systemjs.config.js

谢谢。

13 个答案:

答案 0 :(得分:41)

ng generate service InMemoryData --module=app

将创建src/app/in-memory-data.service.ts文件。然后添加教程中列出的代码,它将起作用。 AFAIK他们甚至不暗示在教程中所以不要感觉不好。实际上他们所说的是

  

forRoot()配置方法采用一个InMemoryDataService类来填充内存数据库。

     

Tour of Heroes示例创建了一个类src / app / in-memory-data.service.ts

这是胡言乱语和错误。

答案 1 :(得分:20)

我使用当前CLI工具创建的项目,我安装了这个:

npm install angular-in-memory-web-api --save

它对我有用。

答案 2 :(得分:14)

确保涵盖所有基地

package.json 中,应与this页面上的匹配。

"angular-in-memory-web-api": "~0.1.1",

此外,您的 systemjs.config 文件看起来也不错!

app.module.ts 中,确保您的in-memory-data-service导入符合您的文件,因为在他们的示例中他们有in-memory-data.service

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data-service'; // <-- Make sure this matches the file name

因此,您的文件应命名为 in-memory-data-service.ts 。我觉得有一个命名错误或某种文件结构问题。

看起来你解决了package.json问题,你得到的错误是说它找不到那个模块,现在可能是因为你的文件名或路径中有拼写错误导入行中的文件是错误的。

答案 3 :(得分:7)

对于Angular5教程和angular-in-memory-web-api@0.5.3:

使用以下内容将新文件“in-memory-data.service.ts”添加到根目录:

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService  implements InMemoryDbService {
createDb() {
    let heroes = [
        { id: 1, name: 'Windstorm' },
        { id: 2, name: 'Bombasto' },
        { id: 3, name: 'Magneta' },
        { id: 4, name: 'Tornado' }
    ];
    return { heroes };
}
}

答案 4 :(得分:2)

要解决此问题,我做了

ng generate service InMemoryData --module=app  

根据用户user875234

的建议

但是这里的很多答案都已经从问题中复制并粘贴了

import { InMemoryDataService } from './in-memory-data-service';  

哪个错了。它应该出现在英雄教程

import { InMemoryDataService } from './in-memory-data.service';  

注意&#34; dataDOTservice&#34;,而不是连字符。它向我们看新手就像教程中的错误一样,并且它在这里没有匹配OP的问题或一些答案。点是正确的,连字符是错误的。

答案 5 :(得分:1)

之后的英雄之旅(角度教程示例)

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data-service';

您必须运行以下命令:

ng generate service InMemoryData

答案 6 :(得分:1)

我在2020年遇到此错误。我正在运行服务器,并在另一个终端中运行ng命令。

重新启动服务器就可以了。 (按CTRL + C,然后再服)

答案 7 :(得分:1)

对于那些看较旧文章的人,请尝试使用ng serve重新运行应用程序,以尝试this solution

ng生成服务InMemoryData --module = app 是以前的解决方案;但是,您会收到此错误:

未知选项:“-module”

默认情况下,Angular设置@Injectable装饰器内部的providerIn属性。这需要注册服务,因此--module不再是实际的解决方案。

为了重新启动角度应用程序,可以在CLI中运行... taskkill / IM“ node.exe” / F

然后, ng服务

答案 8 :(得分:0)

进行全局安装,如果您有权限问题,请使用 sudo

npm install -g angular-in-memory-web-api

答案 9 :(得分:0)

Angular 6 - 我得到了Windows

Failed to compile.

./src/app/in-memory-data.service
Module build failed: Error: ENOENT: no such file or directory, open 'e:\visualStudioWorkspace\angular-tour-of-heroes\src\app\in-memory-data.service'

当我改变

import { InMemoryDataService }  from './in-memory-data.service';

to(注意data.service对数据服务的更改)

import { InMemoryDataService }  from './in-memory-data-service';

并将文件重命名为in-memory-data-service.ts它可以工作。

答案 10 :(得分:0)

要解决此问题,请尝试此步骤

  1. 使用角度cli运行ng generate service InMemoryData --module=app,然后替换教程中列出的代码并保存。
  2. 转到app.module.ts,并在其中添加一些代码,所以这样的代码。
  

app.module.ts

import { HttpClientModule }    from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

@NgModule({
declarations: [
   ...
],
imports: [
   ...
   HttpClientModule,
   // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
   // and returns simulated server responses.
   // Remove it when a real server is ready to receive requests.
   HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false }
   )
],
providers: [],
   ...
  1. 不要忘记在private heroesUrl = 'api/heroes'; // URL to web api中添加hero.service.ts
  

hero.service.ts

   ...
export class HeroService {

   constructor(
      private http: HttpClient,
      private messageService: MessageService,
   ) { }

   private heroesUrl = 'api/heroes';  // URL to web api

   /** GET heroes from the server */
   getHeroes (): Observable<Hero[]> {
      return this.http.get<Hero[]>(this.heroesUrl)
   }


   getHero(id: number): Observable<Hero> {
   ...

   /** Log a HeroService message with the MessageService */
   private log(message: string) {
   ...
  1. 通过运行ng sever刷新您的应用,然后享受!!

答案 11 :(得分:0)

我通过运行以下cmd解决了此问题:

$ yarn add angular-in-memory-web-api

如果使用的是npm,请运行此命令:

$ npm i angular-in-memory-web-api

答案 12 :(得分:0)

同样的问题。我通过停止ng serve来解决它,运行ng build,然后再运行ng serve