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.