Tutorial de Angular2 (Tour of Heroes): No se puede encontrar el módulo 'angular2-in-memory-web-api'


99

He seguido el Tutorial . Después de cambiar app/maint.tsen el capítulo Http, aparece el error al iniciar la aplicación a través de la línea de comando:

app / main.ts (5,51): error TS2307: No se puede encontrar el módulo 'angular2-in-memory-web-api'.

(Visual Studio Code me da el mismo error dentro de main.ts: subrayado rojo ondulado).

Aquí está mi systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

Aquí está mi app/main.ts:

// Imports for loading & configuring the in-memory web api
import { provide }    from '@angular/core';
import { XHRBackend } from '@angular/http';

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

// The usual bootstrapping imports
import { bootstrap }      from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent }   from './app.component';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
    provide(SEED_DATA,  { useClass: InMemoryDataService })     // in-mem server data
]);

Respuestas:


66

Para mí, la única solución fue actualizarme angular2-in-memory-web-apia 0.0.10.

En package.jsonconjunto

'angular2-in-memory-web-api': '0.0.10'

en el bloque de dependencias, y en systemjs.config.jsconjunto

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

en el packagesobjeto.


4
Eso solucionó el error del módulo. Después de eso obtuve errores 404: necesitaba especificar 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }en el archivo systemjs.config.js (ver la respuesta de @GrantTaylor).
toni

4
De particular interés, si está utilizando angular-cli para desarrollar su aplicación, entonces debe agregar 'angular2-in-memory-web-api/**/*.+(js|js.map)'a la vendorNpmFilesmatriz en el archivo angular-cli-build.js. Aftewards, se deben señalar su mapa system-config de este modo: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. Y luego vuelva a ejecutar ng serve(o npm start) para que los archivos angular2-in-memory-web-api terminen en la carpeta dist / vendor.
ofShard

4
Si estás usando el plugin de Eclipse angular 2, la siguiente línea va en package.json, en el dependenciesapartado: "angular-in-memory-web-api": "0.1.1". Sin npm installembargo, tuve que ejecutar desde la carpeta del proyecto después.
João Mendes

1
Sigo enfrentando este problema :( incluso después de seguir los pasos requeridos
Hassan Tariq

5
Ni siquiera tengo un archivo systemjs.config.js en ningún lugar de mi proyecto. Sin embargo, estoy usando Angular4.
bleistift2

101

En cuanto a los proyectos creados con las herramientas CLI actuales, me funcionó instalando

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

y luego realizar la importación como

import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';

Mi paquete.json

> "dependencies": {
>     "@angular/common": "^2.4.0",
>     "@angular/compiler": "^2.4.0",
>     "@angular/core": "^2.4.0",
>     "@angular/forms": "^2.4.0",
>     "@angular/http": "^2.4.0",
>     "@angular/platform-browser": "^2.4.0",
>     "@angular/platform-browser-dynamic": "^2.4.0",
>     "@angular/router": "^3.4.0",
>     "angular-in-memory-web-api": "^0.3.1",
>     "core-js": "^2.4.1",
>     "rxjs": "^5.1.0",
>     "zone.js": "^0.7.6"   },

>     "devDependencies": {
>     "@angular/cli": "1.0.0-rc.4",
>     "@angular/compiler-cli": "^2.4.0",
>     "@types/jasmine": "2.5.38",
>     "@types/node": "~6.0.60",
>     "codelyzer": "~2.0.0",
>     "jasmine-core": "~2.5.2",
>     "jasmine-spec-reporter": "~3.2.0",
>     "karma": "~1.4.1",
>     "karma-chrome-launcher": "~2.0.0",
>     "karma-cli": "~1.0.1",
>     "karma-jasmine": "~1.1.0",
>     "karma-jasmine-html-reporter": "^0.2.2",
>     "karma-coverage-istanbul-reporter": "^0.2.0",
>     "protractor": "~5.1.0",
>     "ts-node": "~2.0.0",
>     "tslint": "~4.5.0",
>     "typescript": "~2.0.0"   }

1
Gracias, también tuve que importar InMemoryDbService como: import {InMemoryDbService} desde 'angular-in-memory-web-api / in-memory-backend.service';
Baris Atamer

4
Después de ejecutar el npm installcomando, obtuve la versión 0.3.2. Con esa versión, pude tal import { InMemoryWebApiModule } from 'angular-in-memory-web-api';como se describe en la gira.
comecme

Como señaló @comecme, después de ejecutar npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'funciona.
ajay_whiz

21

Esto es lo que funcionó para mí:

Noté que package.json tenía la siguiente versión:

"angular 2 -in-memory-web-api": "0.0.20"

Tenga en cuenta el " 2 " en el nombre.

Sin embargo, al hacer referencia a InMemoryWebApiModule, estaba usando 'angular-in-memory-web-api' sin el 2 en el nombre. Así que lo agregué y resolvió el problema:

importar {InMemoryWebApiModule} desde 'angular2-in-memory-web-api';

Nota : Encontré esto en la sección de avisos de https://github.com/angular/in-memory-web-api

A partir de la v.0.1.0, se cambió el nombre del paquete npm de angular2-in-memory-web-api a su nombre actual, angular-in-memory-web-api. Todas las versiones posteriores a 0.0.21 se envían con este nombre. Asegúrese de actualizar su package.json y las declaraciones de importación.


18

Cambios de Angular 4

A partir del 17 de octubre de 2017, el tutorial no menciona que angular-in-memory-web-apino está incluido en una compilación de CLI estándar y debe instalarse por separado. Esto se puede hacer fácilmente con npm:

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

Esto maneja automáticamente los cambios necesarios para package.json, por lo que no es necesario que los edites tú mismo.

Puntos de confusión

Este hilo es bastante confuso ya que la CLI de Angular ha cambiado significativamente desde que se inició este hilo; un problema con muchas API en rápida evolución.

  • angular-in-memory-web-apiha sido renombrado; deja caer el 2 del angular 2 a simplementeangular
  • Angular CLI ya no usa SystemJS (reemplazado por Webpack), por lo que systemjs.config.jsya no existe.
  • npm's package.jsonno deben ser editados directamente; utilice la CLI.

Solución

A partir de octubre de 2017, la mejor solución es simplemente instalarlo usted mismo usando npm, como mencioné anteriormente:

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

¡Buena suerte ahí fuera!


Además, es posible que deba actualizar el archivo package.json con zone.js a 0.8.4, luego ejecute la actualización npm y luego intente la instalación anterior.
Jason

1
Estoy enfrentando un nuevo problema aquí. No puedo encontrar el módulo './in-memory-data.service'.
Kannan T

@kannan - 1. ¿Lo instalaste angular-in-memory-web-apicon npm? 2. ¿Hay una entrada para angular-in-memory-web-apien su package.json? 3. intente matar y reiniciar la CLI de Angular: Ctrl+Cpara matar; ng servePara reiniciar). A veces, la CLI actúa de manera extraña (lo mismo ocurre con el complemento Angular para VSCode)
Master of Ducks

@MasterofDucks Bro resolvió esto ayer, el problema era que no había creado el archivo, por eso. gracias por su ayuda :)
Kannan T

15

Esto funciona para mi:

En el conjunto de bloques de dependencias package.json (use "angular" en lugar de "angular2")

"angular-in-memory-web-api": "^0.3.2",

Entonces corre

 npm install

O

simplemente solo corre (mi preferible)

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

14

Actualmente estoy haciendo el tutorial y tuve un problema similar. Lo que parece haberlo solucionado para mí es definir un archivo principal 'angular2-in-memory-web-api'en la packagesvariable en systemjs.config.js:

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

Antes de agregar esto, se registró un error 404 /node_modules/angular2-in-memory-web-api/donde parecía estar intentando cargar un archivo JavaScript. Ahora se carga /node_modules/angular2-in-memory-web-api/index.jsy los demás archivos de este módulo.


2
Actualmente, parece haber varios errores con la parte HTTP del tutorial Tour of Heroes.
Grant Taylor

Esto no ayuda con mi error (con el error en cuestión).
toni

Primero tuve que actualizar ´angular2-in-memory-web-api´ (ver la respuesta de @traneHead) y luego aplicar esta respuesta.
toni

Gracias, resolvió mi problema. No necesitaba subir a 0.0.10 como explican otros.
Radek Skokan

10

Esto resolvió el problema 404

De la documentación de Angular in-memory-web-api

Importe siempre InMemoryWebApiModule después de HttpModule para asegurarse de que el proveedor XHRBackend de InMemoryWebApiModule reemplaza a todos los demás.

Las importaciones de módulos deben tener InMemoryWebApiModule en la lista después de HttpModule

@NgModule({
imports:      [ BrowserModule,
              AppRoutingModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService),
              ...

1
También es crucial que venga después de importar rutas como AppRoutingModule en la demostración de Angular2. Tenía AppRoutingModule después de InMemoryWebApiModule.forRoot (InMemoryDataService) y rompe todo.
Mark

6

Desde su carpeta raíz (la carpeta contiene package.json), usando:

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

funcionó para mí usando la nueva guía de inicio rápido con Angular-cli
OST

@OST Dude incluso estoy usando angular-cli pero me enfrento a este error No se puede encontrar el módulo './in-memory-data.service'.
Kannan T

5

La solución más simple que se me ocurrió fue instalar el paquete con npm y reiniciar el servidor:

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

Casi instalé el paquete angular2-in-memory-web-api , pero la página npm dice:

Todas las versiones posteriores a 0.0.21 se envían (o pronto se enviarán) bajo angular-in-memory-web-api .

Nota : Esta solución funcionó para un proyecto que se creó con las herramientas CLI, que no enumera el paquete como una dependencia y es posible que no resuelva el problema para los proyectos que se crearon con la semilla Quickstart, que enumera el paquete como una dependencia. .


Mi problema era que ng servetodavía se estaba ejecutando mientras se instalaba. Tuve que apagarlo y reiniciarlo.
Jorn.Beyers

4

Estoy usando angular 4 y por debajo resolví mi problema.

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


hola, incluso estoy usando angular 4, hice lo que dijiste, pero estoy enfrentando un nuevo problema aquí No puedo encontrar el módulo './in-memory-data.service'.
Kannan T

3

Esto fue un verdadero apestoso. Gracias a @traneHead, @toni y otros, estos pasos funcionaron para mí.

  1. Actualizar angular2-in-memory-web-apia0.0.10
  2. Edite la propiedad de la variable de paquetes en systemjs.config.js:

angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }


Este video también puede ser útil: Tutorial de Angular2 - HTTP
AnderSon

3

Creo mi proyecto usando angular-cli y configuro en package.json "angular-in-memory-web-api": "^ 0.2.4" en el bloque de dependencias y luego ejecuto npm install.

Trabaja para mí: D


¿Alguna recomendación sobre qué está causando este problema? ¿O qué configuración pueden verificar o cambiar para eliminar el problema? Quizás el contenido de su "package.json" podría ayudar.
Joshua Briefman

3

Para los usuarios que generaron un proyecto vacío con angular cli 1.4.9 (Actual en octubre de 2017) y luego comenzaron a seguir las instrucciones paso a paso, simplemente ejecuten el siguiente comando:

npm i angular-in-memory-web-api

Solo ese comando, sin nada adicional.

Espero que le ahorre tiempo a alguien


2

Si está utilizando angular cli, obtendrá este error.

Agregue 'angular2-in-memory-web-api'el const barrelsarchivo system-config.ts como se muestra a continuación:

 const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',
  'angular2-in-memory-web-api',

  // App specific barrels.
  'app',
  'app/shared',
  /** @cli-barrel */
];

Y agregue 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'lo siguiente.

System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
  },
  packages: cliSystemConfigPackages,

});

Reconstruir usando npm start. Esto me resolvió el problema.


0

Intente agregar las definiciones mecanografiadas:

sudo typings install --save file:./node_modules/angular2-in-memory-web-api/in-memory-backend.service.d.ts

... especificando el nombre de la dependencia:

angular2-in-memory-web-api

Luego agregue el punto de entrada para "angular2-in-memory-web-api" en /systemjs.config.js

var packages = {
  ...
  'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
};

Instalé las mecanografías como escribiste. Eso cambió el contenido de la carpeta de mecanografía (se agregó "\ definiciones \ in-memory-backend.service \ index.d.ts" al navegador y las subcarpetas principales, y se agregó una referencia en los archivos browser.d.ts y main.d.ts ). ¿Qué quiere decir con "especificar el nombre de la dependencia" ?. Agregué el punto de entrada como especificaste. Pero mi error aún persiste.
toni

Cuando ejecuta "sudo typings install ...", los mecanografiados deberían preguntarle "¿Cuál es el nombre de la dependencia?" y luego puede ingresar "angular2-in-memory-web-api".
user1014932

Mi respuesta se aplicó a angular2-in-memory-web-api v0.0.7 por cierto.
user1014932

0

Tuve el mismo problema, cambié en systemjs.config:

'angular2-in-memory-web-api': { defaultExtension: 'js' },

Por esta línea:

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },

0

Cambiar esta línea, como se sugirió anteriormente, funcionó para mí en el Tutorial de Angular 2 Heroes:

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },

0

Lo solucioné copiando index.jsy index.d.tshacia core.jsy core.d.ts, es decir, dentro de node_modules/angular2-in-memory-web-apicarpeta. Ve a averiguarlo.


0

La respuesta principal me ayudó: cambiar

'angular2-in-memory-web-api': { defaultExtension: 'js' },

a

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

en app \ main.ts simplemente modifica:

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';

a:

import { InMemoryBackendService, SEED_DATA } from '../node_modules/angular2-in-memory-web-api';

luego agregue el parámetro index.js en

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main:'index.js', defaultExtension: 'js' }
};

en systemjs.config.js

es trabajo para mi.


0

La última solución a esta fecha es

  1. reemplace todas las instancias de "angular2-in-memory-web-api" con "angular-in-memory-web-api".
  2. Cambio de versión package.json la dependencia de "angular-in-memory-web-api": "0.0.20"a "angular-in-memory-web-api": "0.1.0" y "zone.js": "^0.6.23"a"zone.js": "^0.6.25"
  3. En systemjs.config.js, cambie la ruta de index.js. Debería verse así:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

A partir de la última versión (actualmente 0.1.14), esto es lo que se indica en el CHANGELOG

En systemjs.config.jsdebería cambiar la asignación a:

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

luego eliminar de packages:

'angular-in-memory-web-api': {        
   main: './index.js',     
   defaultExtension: 'js'      
}

0

Tengo este error porque yo estaba importando InMemoryWebApiModulede angular2-in-memory-web-apique eliminado el 2. En realidad, yo tenía dos entradas en mi archivo package.json; uno fue angular2-in-memory-web-apiy el segundo fue angular-in-memory-web-api. El uso me angular-in-memory-web-apiresolvió el problema. Entonces su importación debería ser así:

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
...
@NgModule({

imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService)
]
})

Usando cli-angular no necesita cambiar nada con respecto a system.config.js.


0

Para mí, simplemente hacer una instalación desde el directorio angular-tour-of-heroes funciona para mí

C: \ nodejs \ angular-tour-of-heroes> npm instalar angular-en-memoria-web-api --save



0

Encontré un problema similar. Acabo de descargar el ejemplo completo cerca del final de la parte 7 (última parte) del tutorial y lo ejecuté. Funcionó.

Por supuesto, primero debe instalar y compilar todo.

> npm install
> npm start

También cambié 'app-root' a 'my-app' en app.component.ts.


0

Si usa angular cli para construir su aplicación angular2, incluir angular2-in-memory-web-api implica tres pasos:

  1. agregue la api al archivo system-config.ts (dentro del subdirectorio src) como se muestra a continuación:

    /** Map relative paths to URLs. */
    const map: any = {
      'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
    };
    /** User packages configuration. */
    const packages: any = {
      'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
    };
    
  2. Añadir

    angular2-in-memory-web-api/**/*.+(js|js.map)' 
    

a la matriz vendorNpmFiles en el archivo angular-cli-build.js como ofShard mencionado;

  1. Por supuesto, agregue al package.json como lo describe traneHead; para 2.0.0-rc.3 utilizo la siguiente versión:

    "angular2-in-memory-web-api": "0.0.13"
    

Encuentro este enlace "Agregar material2 a su proyecto" explica con bastante claridad el proceso de agregar bibliotecas de terceros.


0
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

La InMemoryDataServiceclase no viene bajo ninguna API. Necesitamos crear una clase de servicio y luego importar esa clase de servicio al archivo app.module.ts.


-1

Toni, debes agregar las mecanografías para Angular2-in-memory-web-api.

Agréguelos a su archivo TS.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.