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

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.

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

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.

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!

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

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.

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),
              ...

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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.

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

La mejor manera es instalarlo usando NPM, por ejemplo

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

agregará la referencia requerida

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.

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;

3. 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.

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.

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”