Tutorial Angular2 (Tour of Heroes): Impossibile trovare il modulo 'angular2-in-memory-web-api'


99

Ho seguito il Tutorial . Dopo aver modificato app/maint.tsnel capitolo Http ottengo l'errore all'avvio dell'app tramite riga di comando:

app / main.ts (5,51): errore TS2307: impossibile trovare il modulo 'angular2-in-memory-web-api'.

(Visual Studio Code mi dà lo stesso errore all'interno di main.ts - sottolineatura ondulata rossa.)

Ecco il mio 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);

Ecco il mio 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
]);

Risposte:


66

Per me l'unica soluzione era passare angular2-in-memory-web-apia 0.0.10.

Sul package.jsonset

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

nel blocco delle dipendenze e nel systemjs.config.jsset

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

in packagesoggetto.


4
Questo ha risolto l'errore del modulo. Dopodiché ho ricevuto 404 errori: dovevo specificare 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }nel file systemjs.config.js (vedi risposta di @GrantTaylor).
toni

4
Di particolare rilievo, se si utilizza angolare-cli per sviluppare l'applicazione, quindi è necessario aggiungere 'angular2-in-memory-web-api/**/*.+(js|js.map)'alla vendorNpmFilesmatrice in file angolari-cli-build.js. Aftewards, è necessario puntare il mappa system-config in questo modo: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. E poi riesegui ng serve(o npm start) in modo che i file angular2-in-memory-web-api finiscano nella cartella dist / vendor.
ofShard

4
Se si utilizza l'angolare 2 Plug-in Eclipse, la seguente riga va in package.json, nella dependenciessezione: "angular-in-memory-web-api": "0.1.1". In npm installseguito, però, ho dovuto eseguire dalla cartella del progetto.
João Mendes,

1
Sto ancora affrontando questo problema :( anche dopo aver seguito i passaggi richiesti
Hassan Tariq

5
Non ho nemmeno un file systemjs.config.js da nessuna parte nel mio progetto. Sto usando Angular4, però.
bleistift2

101

Per quanto riguarda i progetti creati utilizzando gli attuali strumenti CLI, ha funzionato per me installando

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

e quindi eseguire l'importazione come

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

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

1
Grazie, inoltre ho dovuto importare InMemoryDbService come: import {InMemoryDbService} da 'angular-in-memory-web-api / in-memory-backend.service';
Baris Atamer

4
Dopo aver eseguito il npm installcomando, ho ottenuto la versione 0.3.2. Con quella versione, potrei proprio import { InMemoryWebApiModule } from 'angular-in-memory-web-api';come descritto nel tour.
comecme il

Come ha sottolineato @comecme, dopo la corsa npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'funziona.
ajay_whiz

21

Ecco cosa ha funzionato per me:

Ho notato che il package.json aveva la seguente versione:

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

Notare il " 2 " nel nome.

Tuttavia, quando si faceva riferimento a InMemoryWebApiModule, si utilizzava "angular-in-memory-web-api" senza il 2 nel nome. Quindi l'ho aggiunto e ha risolto il problema:

import {InMemoryWebApiModule} da "angular2-in-memory-web-api";

Nota : l'ho trovato nella sezione avvisi di https://github.com/angular/in-memory-web-api

A partire dalla v.0.1.0, il pacchetto npm è stato rinominato da angular2-in-memory-web-api al suo nome attuale, angular-in-memory-web-api. Tutte le versioni successive alla 0.0.21 vengono fornite con questo nome. Assicurati di aggiornare il tuo package.json e le istruzioni di importazione.


18

Modifiche angolari 4

A partire dal 17 ottobre 2017, il tutorial non menziona che angular-in-memory-web-apinon è incluso in una build CLI standard e deve essere installato separatamente. Questo può essere fatto facilmente con npm:

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

Questo gestisce automaticamente le modifiche necessarie a package.json, quindi non è necessario apportare modifiche da soli.

Punti di confusione

Questo thread è abbastanza confuso poiché la CLI di Angular è cambiata in modo significativo da quando è stato avviato questo thread; un problema con molte API in rapida evoluzione.

  • angular-in-memory-web-apiè stato rinominato; fa cadere il 2 dall'angolo 2 a semplicementeangular
  • La CLI Angular non utilizza più SystemJS (sostituito da Webpack), quindi systemjs.config.jsnon esiste più.
  • npm's package.jsonnon devono essere modificati direttamente; utilizzare la CLI.

Soluzione

A partire da ottobre 2017, la soluzione migliore è installarlo semplicemente usando npm, come ho detto sopra:

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

Buona fortuna là fuori!


Inoltre potrebbe essere necessario aggiornare il file package.json con zone.js a 0.8.4, quindi eseguire npm update e quindi provare l'installazione sopra.
Jason

1
Sto affrontando un nuovo problema qui. Impossibile trovare il modulo "./in-memory-data.service".
Kannan T

@kannan - 1. Hai installato angular-in-memory-web-apicon npm? 2. C'è una voce per il angular-in-memory-web-apituo package.json? 3. provare a uccidere e riavviare Angular CLI: Ctrl+Cto kill; ng servericominciare). A volte la CLI si comporta in modo strano (idem per il plug-in Angular per VSCode)
Master of Ducks,

@ MasterofDucks Bro ha risolto ieri il problema era che non avevo creato il file, ecco perché. grazie per il vostro aiuto :)
Kannan T

15

Per me funziona:

In package.json il blocco delle dipendenze è impostato (usa "angular" invece di "angular2")

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

Allora corri

 npm install

O

semplicemente corri (il mio preferibile)

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

14

Attualmente sto facendo il tutorial e ho avuto un problema simile. Quello che sembra averlo risolto per me è definire un file principale per 'angular2-in-memory-web-api'nella packagesvariabile in systemjs.config.js:

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

Prima di aggiungere questo, è stato registrato un errore 404 per il punto in /node_modules/angular2-in-memory-web-api/cui sembrava stesse tentando di caricare un file JavaScript. Ora carica /node_modules/angular2-in-memory-web-api/index.jse gli altri file in questo modulo.


2
Al momento sembrano esserci diversi errori con la parte HTTP del tutorial Tour of Heroes.
Grant Taylor,

Questo non aiuta con il mio errore (con l'errore in questione).
toni

Per prima cosa ho dovuto aggiornare ´angular2-in-memory-web-api´ (vedi risposta di @traneHead), quindi applicare questa risposta.
toni

Grazie, ha risolto il mio problema. Non avevo bisogno di salire a 0.0.10 come spiegano altri.
Radek Skokan

10

Questo ha risolto il problema 404

Dalla documentazione Angular in-memory-web-api

Importare sempre InMemoryWebApiModule dopo HttpModule per assicurarsi che il provider XHRBackend di InMemoryWebApiModule sostituisca tutti gli altri.

Le importazioni del modulo dovrebbero avere InMemoryWebApiModule elencato dopo HttpModule

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

1
È anche fondamentale che venga dopo aver importato percorsi come AppRoutingModule nella demo di Angular2. Avevo AppRoutingModule dopo InMemoryWebApiModule.forRoot (InMemoryDataService) e rompe tutto.
Marco

6

Dalla cartella principale (la cartella contiene package.json), utilizzando:

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

ha funzionato per me utilizzando la nuova guida rapida con Angular-cli
OST

@OST Dude sto anche usando angular-cli ma sto affrontando questo errore Impossibile trovare il modulo "./in-memory-data.service".
Kannan T

5

La soluzione più semplice a cui potessi pensare era installare il pacchetto con npm e riavviare il server:

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

Ho quasi installato il pacchetto angular2-in-memory-web-api , ma la pagina npm dice:

Tutte le versioni successive alla 0.0.21 sono (o verranno presto) fornite con angular-in-memory-web-api .

Nota : questa soluzione ha funzionato per un progetto creato con gli strumenti della CLI, che non elenca il pacchetto come dipendenza e potrebbe non risolvere il problema per i progetti creati con il seed Quickstart, che elenca il pacchetto come dipendenza .


Il mio problema era che ng serveera ancora in esecuzione mentre veniva installato. Ho dovuto spegnerlo e riavviare.
Jorn.Beyers

4

Sto usando l'angolo 4 e sotto ha risolto il mio problema.

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


ciao anche sto usando angular 4 avevo fatto come hai detto ma sto affrontando un nuovo problema qui Non riesco a trovare il modulo './in-memory-data.service'.
Kannan T

3

Questo era un vero schifo. Grazie a @traneHead, @toni e altri, questi passaggi hanno funzionato per me.

  1. Aggiorna angular2-in-memory-web-apia0.0.10
  2. Modifica la proprietà della variabile packages in systemjs.config.js:

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


Anche questo video potrebbe essere utile: Angular2 Tutorial - HTTP
AnderSon

3

Creo il mio progetto usando angular-cli e imposto in package.json "angular-in-memory-web-api": "^ 0.2.4" nel blocco delle dipendenze e poi eseguo npm install.

Lavora per me: D


Qualche consiglio su quale conteggio sta causando questo problema? O quale configurazione possono verificare o modificare per eliminare il problema? Forse il contenuto del tuo "package.json" potrebbe aiutarti.
Joshua Briefman

3

Per gli utenti che hanno generato un progetto vuoto con cli angolare 1.4.9 (effettivo a ottobre 2017) e quindi avviato, seguire le istruzioni passo passo, basta eseguire il seguente comando:

npm i angular-in-memory-web-api

Solo quel comando, senza nulla di aggiuntivo.

Spero che questo faccia risparmiare tempo a qualcuno


2

Se stai usando angular cli, riceverai questo errore.

Si prega di aggiungere 'angular2-in-memory-web-api'nel const barrelsfile system-config.ts come di seguito:

 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 */
];

E aggiungi 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'come sotto.

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,

});

Ricostruisci usando npm start. Questo ha risolto il problema per me.


0

Prova ad aggiungere le definizioni del dattiloscritto:

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

... specificando il nome della dipendenza:

angular2-in-memory-web-api

Quindi aggiungi il punto di ingresso per "angular2-in-memory-web-api" in /systemjs.config.js

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

Ho installato le digitazioni come hai scritto tu. Ciò ha cambiato il contenuto della cartella dei caratteri (aggiunto "\ definizioni \ in-memory-backend.service \ index.d.ts" nel browser e nelle sottocartelle principali e aggiunto il riferimento nei file browser.d.ts e main.d.ts ). Cosa intendi per "specificare il nome della dipendenza" ?. Ho aggiunto il punto di ingresso come hai specificato. Ma il mio errore persiste ancora.
toni

Quando esegui "sudo typings install ...", la digitazione dovrebbe chiederti "Qual è il nome della dipendenza?" e poi puoi inserire "angular2-in-memory-web-api".
user1014932

La mia risposta è stata applicata a angular2-in-memory-web-api v0.0.7 btw.
user1014932

0

Ho avuto lo stesso problema, ho cambiato in systemjs.config:

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

Con questa riga:

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

0

La modifica di questa linea, come suggerito sopra, ha funzionato per me nel tutorial di Angular 2 Heroes:

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

0

L'ho risolto copiando index.jse index.d.tsin core.jse core.d.ts, cioè, all'interno della node_modules/angular2-in-memory-web-apicartella. Vai a capire.


0

La risposta principale mi ha aiutato: il cambiamento

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

per

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

0

in app \ main.ts modifica semplicemente:

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

per:

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

quindi aggiungi il parametro index.js in

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

in systemjs.config.js

per me funziona.


0

L'ultima correzione a partire da questa data è

  1. sostituire tutte le istanze di "angular2-in-memory-web-api" con "angular-in-memory-web-api".
  2. Modificare la versione della dipendenza package.json da "angular-in-memory-web-api": "0.0.20"a "angular-in-memory-web-api": "0.1.0" e "zone.js": "^0.6.23"a"zone.js": "^0.6.25"
  3. In systemjs.config.js, modificare il percorso per index.js. Dovrebbe assomigliare a:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

All'ultimo (attualmente 0.1.14), questo è quanto dichiarato nel CHANGELOG

In systemjs.config.jsdovresti cambiare la mappatura in:

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

quindi elimina da packages:

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

0

Ho ricevuto questo errore perché stavo importando InMemoryWebApiModuleda angular2-in-memory-web-apiho rimosso il 2. In realtà avevo due voci nel mio file package.json; uno era angular2-in-memory-web-apie il secondo era angular-in-memory-web-api. L'utilizzo ha angular-in-memory-web-apirisolto il problema per me. Quindi la tua importazione dovrebbe essere così:

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

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

Utilizzando cli-angular non è necessario modificare nulla in merito system.config.js.


0

Per me solo fare un'installazione dalla directory angular-tour-of-heroes funziona per me

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



0

Ho riscontrato un problema simile. Ho appena scaricato l'intero esempio verso la fine della parte 7 (ultima parte) del tutorial e l'ho eseguito. Ha funzionato.

Ovviamente, devi prima installare e compilare tutto.

> npm install
> npm start

Ho anche cambiato "app-root" in "my-app" in app.component.ts.


0

Se utilizzi angular cli per creare la tua app angular2, incluso angular2-in-memory-web-api comporta tre passaggi:

  1. aggiungi l'API al file system-config.ts (all'interno della sottodirectory src) come di seguito:

    /** 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. Inserisci

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

all'array vendorNpmFiles nel file angular-cli-build.js come ofShard menzionato;

  1. Ovviamente, aggiungi al package.json come descritto da traneHead; per 2.0.0-rc.3 utilizzo la versione seguente:

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

Trovo che questo link "Aggiunta di materiale2 al tuo progetto" spieghi abbastanza chiaramente il processo di aggiunta di librerie di terze parti.


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

La InMemoryDataServiceclasse non rientra in alcuna API. Dobbiamo creare una classe di servizio e quindi importare quella classe di servizio nel file app.module.ts.


-1

Toni, devi aggiungere i caratteri per Angular2-in-memory-web-api.

Aggiungili nel tuo file TS.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.