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

subscribe angular 2

Question

He seguido el Tutorial . Después de cambiar 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 comandos:

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

Answer 1

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 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 en package.json , por lo que no necesita realizar modificaciones 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; baja el 2 de angular 2 a simplemente angular
• La CLI angular ya no usa SystemJS (reemplazado por Webpack), por lo que systemjs.config.js ya no existe.
• npm no debe editarse 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 ahi!

Answer 2

A partir de la última versión (actualmente 0.1.14), esto es lo que se indica 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 eliminar de los packages :

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

Answer 3

Actualmente estoy haciendo el tutorial y tuve un problema similar. Lo que parece haberlo solucionado 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, hubo un error 404 registrado 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.

Answer 4

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

Answer 5

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 mi: D

Answer 6

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

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

Answer 7

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

Answer 8

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

> npm install
> npm start

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

Answer 9

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

Answer 10

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

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

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

Answer 11

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 corre (mi preferible)

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

Answer 12

Esto resolvió el problema 404

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

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

Las importaciones de módulos deben tener InMemoryWebApiModule listado después de HttpModule

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

Answer 13

Intente agregar las definiciones de mecanografiado:

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

... especificando el nombre de 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'' }
};

Answer 14

La última solución a partir de esta fecha es

1. reemplace todas las instancias de "angular2-in-memory-web-api" con "angular-in-memory-web-api".
2. Cambie la versión de dependencia 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'' }

Answer 15

La mejor manera es instalarlo usando NPM, por ejemplo

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

agregará la referencia requerida

Answer 16

La respuesta principal me ayudó: cambiar

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

a

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

Answer 17

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 podría no resolver el problema de los proyectos que se crearon con el inicio rápido, que sí enumera el paquete como una dependencia .

Answer 18

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

Answer 19

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 ahorre tiempo a alguien

Answer 20

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

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

Answer 21

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

C: / nodejs / angular-tour-of-heroes> npm install angular-in-memory-web-api --save

Answer 22

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 .

Answer 23

Si está utilizando angular cli, obtendría 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í.

Answer 24

Si utiliza angular cli para compilar su aplicación angular2, incluir la API angular2-in-memory-web-app 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 paquete.json como lo describe traneHead; para 2.0.0-rc.3 utilizo la versión a continuación:

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

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

Answer 25

Toni, debes agregar los tipings 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”

Answer 26

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

Answer 27

en app / 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'';

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

Answer 28

Estoy usando angular 4 y debajo resolvió mi problema.

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

Answer 29

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 al archivo app.module.ts.