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.
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.
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.
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.
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 };
}
}
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.
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
Faites-le installation globale, utilisezSudosi vous avez des problèmes d'autorisations
npm install -g angular-in-memory-web-api
pour le résoudre, essayez cette étape
ng generate service InMemoryData --module=app
avec votre clé angulaire, puis remplacez le code répertorié dans le tutoriel et enregistrez-le.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: [],
...
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) {
...
ng sever
et profitez-en !.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.