import - observables - Tutorial de Angular2(Tour of Heroes): no se puede encontrar el módulo ''angular2-in-memory-web-api''
subscribe angular 2 (29)
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 simplementeangular
-
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!
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
]);
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'' }
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.
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'' },
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
Desde su carpeta raíz (la carpeta contiene package.json), usando:
npm install angular-in-memory-web-api –-save
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" }
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.
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.
Esto fue un verdadero hedor. Gracias a @traneHead, @toni y otros, estos pasos funcionaron para mí.
-
Actualizar
angular2-in-memory-web-api
a0.0.10
-
Edite la propiedad de la variable paquetes en
systemjs.config.js
:
angular2-in-memory-web-api'': { main: ''core.js'', defaultExtension: ''js'' }
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
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),
...
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'' }
};
La última solución a partir de esta fecha es
- reemplace todas las instancias de "angular2-in-memory-web-api" con "angular-in-memory-web-api".
-
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"
-
En systemjs.config.js, cambie la ruta de index.js.
Debería verse así:
''angular-in-memory-web-api'': { main: ''index.js'', defaultExtension: ''js'' }
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
La respuesta principal me ayudó: cambiar
''angular2-in-memory-web-api'': { defaultExtension: ''js'' },
a
''angular2-in-memory-web-api'': { main: ''index.js'', defaultExtension: ''js'' }
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 .
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.
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
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
.
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
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
.
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í.
Si utiliza angular cli para compilar su aplicación angular2, incluir la API angular2-in-memory-web-app implica tres pasos:
-
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'' } };
-
Añadir
angular2-in-memory-web-api/**/*.+(js|js.map)''
a la matriz vendorNpmFiles en el archivo angular-cli-build.js como ofShard mencionado;
-
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.
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”
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'' },
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í.
Estoy usando angular 4 y debajo resolvió mi problema.
npm install angular-in-memory-web-api --save
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.