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

He seguido el Tutorial . Después de cambiar la app/maint.ts en el capítulo Http, app/maint.ts 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’.

(Código de Visual Studio me da el mismo error dentro de main.ts – subrayado ondulado rojo.)

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

Para mí, la única solución fue actualizar angular2-in-memory-web-api a 0.0.10 .

En el package.json

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

en el bloque de dependencias y en el conjunto systemjs.config.js

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

en el objeto de packages .

En cuanto a los proyectos creados con las herramientas CLI actuales, funcionó para mí 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" } 

Esto es lo que funcionó para mí:

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

“angular 2 -en-memoria-web-api”: “0.0.20”

Tenga en cuenta el ” 2 ” en el nombre.

Sin embargo, al hacer referencia a InMemoryWebApiModule utilizaba ‘angular-in-memory-web-api’ sin los 2 en el nombre. Entonces lo agregué y resolvió el problema:

importar {InMemoryWebApiModule} de ‘angular2-in-memory-web-api’;

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

Desde v.0.1.0, el paquete npm se renombró 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 e importar las declaraciones.

Angular 4 Cambios

A partir del 17 de octubre de 2017, el tutorial no menciona que angular-in-memory-web-api no está incluido en una comstackció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 en package.json , por lo que no necesita realizar ediciones usted mismo.

Puntos de confusión

Este hilo es bastante confuso ya que la CLI angular ha cambiado significativamente desde que se inició este hilo; un problema con muchas API que evolucionan rápidamente.

  • angular-in-memory-web-api ha sido renombrado; cae el 2 del angular 2 a simplemente angular
  • Angular CLI ya no usa SystemJS (reemplazado por Webpack), por lo que systemjs.config.js ya no existe.
  • El package.json npm no debe ser editado directamente; usa 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 por ahí!

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

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

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

Esto funciona para mi:

En package.json dependencies block set (use “angular” en lugar de “angular2”)

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

Entonces corre

  npm install 

O

simplemente corre (mi preferido)

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

Esto resolvió el problema 404

Desde Angular in-memory-web-api Documentación

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

Las importaciones del módulo deben tener InMemoryWebApiModule enumerado después de HttpModule

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

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

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

Estoy usando angular 4 y debajo resolví mi problema.

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

La solución más simple que pude pensar 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 de npm dice:

Todas las versiones posteriores a 0.0.21 se envían (o pronto se enviarán) a 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 podría no resolver el problema para los proyectos que se crearon con la semilla Quickstart, que enumera el paquete como una dependencia .

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

  1. Actualiza angular2-in-memory-web-api a 0.0.10
  2. Edite la propiedad variable de paquetes en systemjs.config.js :

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

Creo mi proyecto usando angular-cli y lo 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

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 ejecute el siguiente comando:

 npm i angular-in-memory-web-api 

Solo ese comando, sin nada adicional.

Espero que salve el tiempo de alguien

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

Agregue 'angular2-in-memory-web-api' en los const barrels en el archivo system-config.ts de la siguiente manera:

  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' como se muestra a continuación.

 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 resolvió el problema para mí.

Intente agregar las definiciones de mecanografía:

 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 

A continuación, 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' } }; 

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

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

Lo resolví copiando index.js e index.d.ts a core.js y core.d.ts , es decir, dentro de la node_modules/angular2-in-memory-web-api . Ve a descubrir.

La respuesta principal me ayudó: cambiar

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

a

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

en la aplicación \ main.ts simplemente modifique:

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

a:

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

a continuación, 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

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. Cambiar la versión de dependencia de package.json 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' }

A partir de la última (actualmente 0.1.14), esto es lo que se establece en el CHANGELOG

En systemjs.config.js debe cambiar la asignación a:

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

luego borre de los packages :

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

Recibí este error porque estaba importando InMemoryWebApiModule de angular2-in-memory-web-api el 2. En realidad, tenía dos entradas en mi archivo package.json; uno era angular2-in-memory-web-api y el segundo era angular-in-memory-web-api . El uso de angular-in-memory-web-api resolvió el problema para mí. 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 .

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

C: \ nodejs \ angular-tour-of-heroes> npm instalar angular-in-memory-web-api –save

La mejor manera es instalarlo usando NPM, por ejemplo

npm instala git + https://github.com/itryan/in-memory-web-api/ –save

agregará la referencia requerida

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

Por supuesto, primero debe instalar y comstackr todo.

 > npm install > npm start 

También cambié ‘raíz de aplicación’ a ‘mi-aplicación’ en app.component.ts.

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 de Hard mencionó;

  1. Por supuesto, agregue al paquete.json como se describe en traneHead; para 2.0.0-rc.3 utilizo la versión a continuación:

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

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

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

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

Toni, necesitas agregar las tipings para Angular2-in-memory-web-api.

Agréguelos en su archivo TS.

 /// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”