Tutoriel Angular2 (Tour of Heroes): Impossible de trouver le module 'angular2-in-memory-web-api'
J'ai suivi le Tutorial . Après avoir modifié app/maint.ts dans le chapitre HTTP, je reçois le message d'erreur au démarrage de l'application via la ligne de commande:
app/main.ts (5,51): erreur TS2307: impossible de trouver le module 'angular2-in-memory-web-api'.
(Le code Visual Studio me donne la même erreur dans main.ts - soulignement rouge ondulé.)
Voici mon 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);
Voici mon 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
]);
Pour moi, la seule solution consistait à mettre à niveau angular2-in-memory-web-api à 0.0.10.
Dans package.json set
'angular2-in-memory-web-api': '0.0.10'
dans le bloc des dépendances et dans systemjs.config.js
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
dans l'objet packages.
Quant aux projets créés avec les outils CLI actuels, cela a fonctionné pour moi en installant
npm install angular-in-memory-web-api --save
puis en effectuant l'importation en tant que
import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
Mon 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" }
Voici ce qui a fonctionné pour moi:
J'ai remarqué que le package.json avait la version suivante:
"angular2 -in-memory-web-api": "0.0.20"
Notez le "2" dans le nom.
Cependant, lors de la référence à InMemoryWebApiModule, il utilisait 'angular-in-memory-web-api' sans le 2 dans le nom. Alors je l'ai ajouté et cela a résolu le problème:
importer {InMemoryWebApiModule} de 'angular2-in-memory-web-api';
Note: J'ai trouvé ceci dans la section de notification de https://github.com/angular/in-memory-web-api
À partir de la version 1.0.0, le package npm a été renommé à partir de angular2-in-memory-web-api à son nom actuel, angular-in-memory-web-api. Toutes les versions ultérieures à 0.0.21 sont expédiées sous Ce nom. Assurez-vous de mettre à jour vos déclarations package.json et d'importation.
Changements angulaires 4
À compter du 17 octobre 2017, le didacticiel ne mentionne pas que angular-in-memory-web-api n'est pas inclus dans une version CLI standard et doit être installé séparément. Ceci peut être facilement fait avec npm:
$ npm install angular-in-memory-web-api --save
Cela gère automatiquement les modifications nécessaires à package.json, vous n'avez donc pas besoin de faire des modifications vous-même.
Points de confusion
Ce fil est assez déroutant car l’interface CLI angulaire a considérablement changé depuis le début de ce fil; un problème avec de nombreuses API en évolution rapide.
angular-in-memory-web-apia été renommé; il laisse tomber le 2 d'angular 2 simplementangular- La CLI angulaire n'utilise plus SystemJS (remplacé par Webpack), donc
systemjs.config.jsn'existe plus. npm'spackage.jsonne doit pas être modifié directement; utilisez la CLI.
Solution
À partir d'octobre 2017, la meilleure solution consiste simplement à l'installer vous-même à l'aide de npm, comme je l'ai mentionné ci-dessus:
$ npm install angular-in-memory-web-api --save
Bonne chance là-bas!
Ça marche pour moi:
Dans block.json dependencies block set (utilisez "angular" au lieu de "angular2")
"angular-in-memory-web-api": "^0.3.2",
Puis courir
npm install
OU
il suffit simplement de courir (mon préférable)
npm install angular-in-memory-web-api --save
Je suis en train de faire le tutoriel et j'ai eu un problème similaire. Ce qui semble l'avoir résolu pour moi, c'est la définition d'un fichier principal pour 'angular2-in-memory-web-api' dans la variable packages dans systemjs.config.js:
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
Avant d’ajouter cela, il y avait une erreur 404 enregistrée pour /node_modules/angular2-in-memory-web-api/ où il semblait essayer de charger un fichier JavaScript. Maintenant, il charge /node_modules/angular2-in-memory-web-api/index.js et les autres fichiers de ce module.
Cela a résolu le problème 404
À partir de la documentation ang-in-memory-web-api
Importez toujours le InMemoryWebApiModule après le HttpModule pour vous assurer que le fournisseur XHRBackend du InMemoryWebApiModule remplace tous les autres.
InMemoryWebApiModule doit figurer dans les importations de module après HttpModule.
@NgModule({
imports: [ BrowserModule,
AppRoutingModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
...
Depuis votre dossier racine (le dossier contient package.json), en utilisant:
npm install angular-in-memory-web-api –-save
La solution la plus simple à laquelle je pouvais penser était d'installer le paquet avec npm et de redémarrer le serveur:
npm install angular-in-memory-web-api --save
J'ai presque installé le paquet angular2-in-memory-web-api, mais la page npm dit:
Toutes les versions ultérieures à 0.0.21 sont (ou seront bientôt) expédiées sous angular-in-memory-web-api.
Note: cette solution fonctionnait pour un projet créé avec les outils CLI, qui ne répertoriait pas le package en tant que dépendance et qui ne résolvait peut-être pas le problème des projets créés avec le germe Quickstart, qui répertorie les paquet comme dépendance.
J'utilise angulaire 4 et ci-dessous résolu mon problème.
npm installer angular-in-memory-web-api --save
Je crée mon projet en utilisant angular-cli et je fixe dans package.json "angular-in-memory-web-api": "^ 0.2.4" dans le bloc des dépendances, puis je lance l'installation de npm.
Travaille pour moi: D
Pour les utilisateurs qui ont généré un projet vide avec angular cli 1.4.9 (mise à jour en octobre 2017) et qui ont ensuite commencé à suivre les instructions pas à pas, exécutez simplement la commande suivante:
npm i angular-in-memory-web-api
Juste cette commande, sans rien d’autre.
J'espère que cela fait gagner du temps à quelqu'un
C'était un vrai puanteur. Grâce à @traneHead, @toni et d’autres, ces étapes ont fonctionné pour moi.
- Mettez à niveau
angular2-in-memory-web-apià0.0.10 - Editez la propriété de variable packages dans
systemjs.config.js:
angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
Si vous utilisez Cli angulaire, vous obtiendrez cette erreur.
Veuillez ajouter 'angular2-in-memory-web-api' dans le const barrels dans le fichier system-config.ts comme ci-dessous:
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 */
];
Et ajoutez 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api' comme ci-dessous.
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,
});
Reconstruisez en utilisant npm start. Cela a résolu le problème pour moi.
La réponse principale m'a aidé: Change
'angular2-in-memory-web-api': { defaultExtension: 'js' },
à
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
Essayez d’ajouter les définitions TypeScript:
Sudo typings install --save file:./node_modules/angular2-in-memory-web-api/in-memory-backend.service.d.ts
... en spécifiant le nom de la dépendance:
angular2-in-memory-web-api
Ajoutez ensuite le point d’entrée pour "angular2-in-memory-web-api" dans /systemjs.config.js
var packages = {
...
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
};
Le meilleur moyen est de l’installer à l’aide de NPM, par exemple
npm install git + https://github.com/itryan/in-memory-web-api/ --save
il va ajouter la référence requise
dans app\main.ts modifiez simplement:
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
à:
import { InMemoryBackendService, SEED_DATA } from '../node_modules/angular2-in-memory-web-api';
puis ajoutez le paramètre index.js dans
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main:'index.js', defaultExtension: 'js' }
};
dans systemjs.config.js
c'est un travail pour moi.
J'ai eu le même problème, j'ai changé dans systemjs.config:
'angular2-in-memory-web-api': { defaultExtension: 'js' },
Par cette ligne:
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
Je l'ai résolu en copiant index.js et index.d.ts en core.js et core.d.ts, c'est-à-dire dans le dossier node_modules/angular2-in-memory-web-api. Allez comprendre.
Le dernier correctif à compter de cette date, est de
- remplace toutes les occurrences de "angular2-in-memory-web-api" par "angular-in-memory-web-api".
- Remplacez la version de dépendance package.json de
"angular-in-memory-web-api": "0.0.20"par"angular-in-memory-web-api": "0.1.0"Et"zone.js": "^0.6.23"par"zone.js": "^0.6.25" - Dans systemjs.config.js, modifiez le chemin d'accès à index.js. Cela devrait ressembler à:
'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
La modification de cette ligne, comme suggéré ci-dessus, a fonctionné pour moi dans le didacticiel Angular 2 Heroes:
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
Si vous utilisez cli angulaire pour créer votre application angular2, y compris l'angular2-in-memory-web-api comporte trois étapes:
ajoutez l'api au fichier system-config.ts (dans le sous-répertoire src) comme ci-dessous:
/** 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' } };Ajouter
angular2-in-memory-web-api/**/*.+(js|js.map)'
dans le tableau vendorNpmFiles du fichier angular-cli-build.js, comme indiqué par ofShard;
Bien sûr, ajoutez à package.json comme décrit par traneHead; for 2.0.0-rc.3 J'utilise la version ci-dessous:
"angular2-in-memory-web-api": "0.0.13"
Je trouve que ce link "Ajouter du matériel2 à votre projet" explique très clairement le processus d’ajout de bibliothèques tierces.
J'ai rencontré un problème similaire. Je viens de télécharger l'intégralité de l'exemple vers la fin de la partie 7 (dernière partie) du tutoriel et de l'exécuter. Ça a marché.
Bien sûr, vous devez d'abord tout installer et tout compiler.
> npm install
> npm start
J'ai également remplacé "app-root" par "my-app" dans app.component.ts.
Pour la dernière fois (actuellement 0.1.14), c'est ce qui est indiqué dans la CHANGELOG
Dans
systemjs.config.js, vous devriez changer le mappage en:'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'puis supprimer de
packages:'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' }
Pour moi, faire juste une installation à partir du répertoire angular-tour-of-heroes fonctionne pour moi
C:\nodejs\tour-angulaire-des-héros> npm installer angular-in-memory-web-api --save
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
La classe InMemoryDataService ne relève d'aucune API. Nous devons créer une classe de service, puis importer cette classe de service dans le fichier app.module.ts.
J'ai eu cette erreur parce que j'importais InMemoryWebApiModule de angular2-in-memory-web-api J'ai enlevé le 2. En fait, j'avais deux entrées dans mon fichier package.json; l'un était angular2-in-memory-web-api et le second étaitangular-in-memory-web-api. Utiliser angular-in-memory-web-api a résolu le problème pour moi. Donc, votre importation devrait être comme ceci:
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
...
@NgModule({
imports: [
InMemoryWebApiModule.forRoot(InMemoryDataService)
]
})
En utilisant cli-angular, vous ne devez rien changer concernant system.config.js.