web-dev-qa-db-fra.com

Impossible de trouver le module './in-memory-data-service' dans la tournée des héros pour Angular2

J'essaie de travailler sur l'application Angular2 Tour of Heroes, et je rencontre des bugs sur la section Http du tutoriel . 

Au début, j'ai eu l'erreur:

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

Mais corrigé cela en utilisant le information de cette question .

Cependant, à cette même étape, j'obtiens aussi l'erreur suivante:

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

J'ai vérifié trois fois et je pense que mon fichier in-memory-data-service.ts et mon fichier app.module.ts sont exactement les mêmes que ceux répertoriés dans le didacticiel (à ce moment précis). 

Actuellement, mon fichier in-memory-data-service.ts ressemble à ceci:

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

Mon fichier app.module.ts ressemble à ceci:

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

Je ne sais pas si cela est dû à une dépendance dans package.json ou systemjs.config qui n'est pas définie correctement, ou s'il y a une simple erreur que j'aide.

MODIFIER

Mon fichier systemjs.config.js ressemble à ceci:

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

Ma structure de fichier ressemble actuellement à ceci:

Structure de fichier:

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

index.html
systemjs.config.js

Je vous remercie.

angulartypescriptangular2-http
26
Jonathan Bechtel

Assurez-vous simplement que toutes vos bases sont couvertes

Dans votre package.json, doit correspondre à celui de this page.

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

De plus, votre fichier systemjs.config a également une belle apparence!

Dans votre app.module.ts, assurez-vous que votre importation in-memory-data-service correspond à votre fichier car, dans leur exemple, ils ont 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

Votre fichier devrait donc s'appeler in-memory-data-service.ts. Il me semble qu’il ya une faute de frappe ou une sorte de problème de structure de fichier.

Il semblerait que vous ayez résolu le problème package.json. L’erreur que vous obtenez est qu’il ne peut pas trouver ce module, ce qui est peut-être dû au fait que vous avez une faute de frappe dans le nom du fichier ou le chemin du fichier. est faux dans la ligne d'importation.

13
Logan H
ng generate service InMemoryData --module=app

Va créer le fichier src/app/in-memory-data.service.ts. Ajoutez ensuite le code répertorié dans le tutoriel et cela fonctionnera. D'après ce que je sais, ils n'impliquent même pas cela dans le tutoriel, alors ne vous sentez pas mal. En fait, ce qu'ils disent est 

La méthode de configuration forRoot () utilise une classe InMemoryDataService qui initialise la base de données en mémoire.

L’exemple Tour of Heroes crée une telle classe src/app/in-memory-data.service.ts

Ce qui est charabia et faux.

40
user875234

Mes projets ont été créés avec les outils CLI actuels et j'ai installé ceci:

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

Ça marche pour moi.

19
Hüseyin Türkmenoğlu

Pour Angular5 tutorial et [email protected]:

Ajoutez le nouveau fichier "in-memory-data.service.ts" à votre répertoire racine avec le contenu suivant:

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

Pour résoudre ce problème je l'ai fait 

ng generate service InMemoryData --module=app

comme suggéré par l'utilisateur user875234

Mais aussi beaucoup de réponses ici ont copié et collé de la question 

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

Ce qui est faux. Ce devrait être comme il apparaît dans le tutoriel Heroes 

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

Notez le "dataDOTservice", pas un trait d'union. Cela nous semble être une erreur dans le didacticiel, et cela ne correspond pas à la question d’OP ni à certaines réponses ici. Le point est correct, le trait d'union est faux. 

2
Rin and Len

Dans le tour des héros (exemple de tutoriel angulaire) après

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

vous devez exécuter la commande:

ng generate service InMemoryData
2
Mohammad Aghazadeh

Faites-le installation globale, utilisezSudosi vous avez des problèmes d'autorisations

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

pour le résoudre, essayez cette étape

  1. lancez ng generate service InMemoryData --module=app avec votre clé angulaire, puis remplacez le code répertorié dans le tutoriel et enregistrez-le.
  2. allez à app.module.ts, et ajoutez du code, pour que le code ressemble à ceci.

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. N'oubliez pas d'ajouter private heroesUrl = 'api/heroes'; // URL to web api dans 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. Actualisez votre application en exécutant ng sever et profitez-en !.
0
Latief Anwar

Angular 6 - Windows que j'ai

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'

Quand je change 

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

to (notifiez les modifications de data.service dans le service de données) 

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

et renommer le fichier en in-memory-data-service.ts cela fonctionne.

0
Levijatanu