que - subscribe angular 2

No se puede encontrar el módulo ''./in-memory-data-service'' en el tour de los héroes para Angular2

Question

Estoy tratando de trabajar a través de la aplicación Tour of Heroes de Angular2, y me estoy encontrando con errores en la sección Http del tutorial .

Al principio me salía el error:

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

Pero arreglé eso usando la información de esta pregunta .

Sin embargo, en este mismo paso también obtengo el siguiente error:

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

Lo he comprobado tres veces y creo que tanto mi archivo in-memory-data-service.ts como mi archivo app.module.ts son exactamente los mismos que se enumeran en el tutorial (en este momento en particular).

En este momento mi archivo in-memory-data-service.ts se ve así:

CÓDIGO:

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

Mi archivo app.module.ts se ve así:

CÓDIGO:

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

No estoy seguro de que esto se deba a algún tipo de dependencia en package.json o systemjs.config que no esté configurado correctamente, o si hay un error simple, estoy ayudando.

EDITAR

Mi archivo systemjs.config.js se ve así:

CÓDIGO:

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

Mi estructura de archivos actualmente se ve así:

Estructura del archivo:

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

index.html
systemjs.config.js

Gracias.

Answer 1

Angular 6 - Windows tengo

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

Cuando me cambio

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

a (notar los cambios de data.service al servicio de datos)

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

y renombrar el archivo a in-memory-data-service.ts funciona.

Answer 2

En la gira de heroes (ejemplo tutorial angular) despues

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

debe ejecutar el comando:

ng generate service InMemoryData

Answer 3

Haz una instalación global, usa sudo si tienes problemas con los permisos

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

Answer 4

Mis proyectos se crearon utilizando las herramientas actuales de CLI, e instalé esto:

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

Esto funciona para mi.

Answer 5

Para Angular5 tutorial y [email protected]:

Agregue el nuevo archivo "in-memory-data.service.ts" a su directorio raíz con este contenido:

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

Answer 6

Para resolver este problema lo hice

ng generate service InMemoryData --module=app  

sugerido por el usuario

Pero también muchas respuestas aquí se han copiado y pegado de la pregunta.

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

Cuál está mal. Debería ser como aparece en el tutorial de Heroes.

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

Observe el "dataDOTservice", no un guión. Nos parece a los novatos un error en el tutorial, y no coincide con la pregunta de OP o con algunas respuestas aquí. El punto es correcto, el guión es incorrecto.

Answer 7

Para resolverlo, prueba este paso.

1. ejecuta ng generate service InMemoryData --module=app con tu cli angular, luego reemplaza el código listado en el tutorial y guárdalo.
2. app.module.ts a app.module.ts y agregue algo de código en él, de modo que el código sea así.

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: [],
   ...

3. No olvides agregar private heroesUrl = ''api/heroes''; // URL to web api private heroesUrl = ''api/heroes''; // URL to web api en 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) {
   ...

4. Actualiza tu aplicación ejecutando ng sever , y disfruta !.

Answer 8

Solo asegúrate de que todas tus bases estén cubiertas

En su package.json , debe coincidir con el de this página.

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

Además, tu archivo systemjs.config también se ve bien!

En su app.module.ts , asegúrese de que la importación de su in-memory-data-service coincida con su archivo, ya que en su ejemplo tienen un servicio de datos 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

Por lo tanto, su archivo debe denominarse in-memory-data-service.ts . Me parece que hay un error tipográfico de nombre o algún tipo de problema de estructura de archivos.

Parece que resolvió el problema package.json, y el error que está obteniendo indica que no puede encontrar ese módulo, ahora podría deberse a un error tipográfico en el nombre del archivo o en la ruta del archivo. Está mal en la línea de importación.

Answer 9

ng generate service InMemoryData --module=app

src/app/in-memory-data.service.ts archivo src/app/in-memory-data.service.ts . Luego agregue el código listado en el tutorial y funcionará. AFAIK ni siquiera implican eso en el tutorial, así que no te sientas mal. De hecho lo que dicen es

El método de configuración forRoot () toma una clase InMemoryDataService que prepara la base de datos en memoria.

El ejemplo de Tour of Heroes crea una clase src / app / in-memory-data.service.ts

Lo que es una tontería y un error.