Angular2 Підручник (тур Героїв): Неможливо знайти модуль 'angular2-in-memory-web-api'


99

Я дотримувався Підручника . Після зміни app/maint.tsрозділу Http я отримую помилку при запуску програми за допомогою командного рядка:

app / main.ts (5,51): помилка TS2307: Неможливо знайти модуль 'angular2-in-memory-web-api'.

(Код Visual Studio дає мені таку ж помилку в main.ts - підкреслення червоного хвиля.)

Ось мій 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);

Ось мій 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
]);

Відповіді:


66

Для мене єдиним рішенням було оновлення angular2-in-memory-web-apiдо 0.0.10.

У package.jsonнаборі

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

в блоці залежностей і в systemjs.config.jsнаборі

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

в packagesоб’єкті.


4
Це виправило помилку модуля. Після цього я отримав 404 помилки - мені потрібно було вказати 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }у файлі systemjs.config.js (див. Відповідь @GrantTaylor).
тоні

4
Зокрема, зверніть увагу, якщо ви використовуєте angular-cli для розробки свого додатка, тоді ви повинні додати 'angular2-in-memory-web-api/**/*.+(js|js.map)'до vendorNpmFilesмасиву у файлі angular-cli-build.js. Aftewards, ви повинні вказати свій системний конфігураційний карту таким чином: 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'. Потім перезапустіть ng serve(або npm start), щоб файли angular2-in-memory-web-api потрапили у папку dist / vendor.
Шард

4
Якщо ви використовуєте Кутовий 2 Eclipse , плагін, наступний рядок йде в package.json, в dependenciesрозділі: "angular-in-memory-web-api": "0.1.1". Мені довелося npm installзгодом бігти з папки проекту.
Жоао Мендес

1
Я все ще стикаюся з цією проблемою :( навіть після виконання необхідних кроків
Хассан Тарік,

5
У мене навіть немає файлу systemjs.config.js ніде в моєму проекті. Я використовую Angular4, хоча.
bleistift2

101

Що стосується проектів, створених за допомогою поточних інструментів CLI, то він працював для мене, встановлюючи

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

а потім виконувати імпорт як

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

Мій пакунок.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
Дякую, також мені довелося імпортувати InMemoryDbService як: import {InMemoryDbService} з 'angular-in-memory-web-api / in-memory-backend.service';
Баріс Атамер

4
Після запуску npm installкоманди я отримав версію 0.3.2. З цією версією я міг би так само, import { InMemoryWebApiModule } from 'angular-in-memory-web-api';як описано в турі.
comecme

Як @comecme зазначив, після запуску npm install, import { InMemoryWebApiModule } from 'angular-in-memory-web-api'працює.
ajay_whiz

21

Ось що для мене спрацювало:

Я помітив, що package.json мала таку версію:

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

Відзначте " 2 " у назві.

Однак при посиланні на InMemoryWebApiModule він використовував "angular-in-memory-web-api" без значень 2 у назві. Тож я додав його, і це вирішило проблему:

імпорт {InMemoryWebApiModule} з 'angular2-in-memory-web-api';

Примітка . Я знайшов це у розділі повідомлень https://github.com/angular/in-memory-web-api

Станом на v.0.1.0 пакет npm перейменовано з angular2-in-memory-web-api на його поточне ім'я, angular-in-memory-web-api. Усі версії після 0.0.21 поставляються під цим ім'ям. Обов’язково оновіть свою package.json та імпорт заяв.


18

Кутовий 4 зміни

Станом на 17 жовтня 2017 року в навчальному посібнику не зазначається, що angular-in-memory-web-apiне входить до стандартної збірки CLI, і його потрібно встановити окремо. Це легко зробити за допомогою npm:

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

Це автоматично обробляє необхідні зміни package.json, тому вам не потрібно самостійно вносити зміни.

Точки плутанини

Цей потік досить заплутаний, оскільки кутова CLI значно змінилася з моменту запуску цієї нитки; проблема з багатьма швидко розвиваються API.

  • angular-in-memory-web-apiперейменовано; вона скидає 2 з кутових 2 простоangular
  • Кутова CLI більше не використовує SystemJS (замінена Webpack), тому systemjs.config.jsбільше не існує.
  • npm's package.jsonне слід редагувати безпосередньо; використовувати CLI.

Рішення

Станом на жовтень 2017 року, найкраще виправити це - просто встановити його самостійно npm, як я вже згадував вище:

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

Удачі там!


Також вам може знадобитися оновити файл package.json з zone.js до 0.8.4, потім запустити оновлення npm, а потім спробувати встановити вище.
Джейсон

1
Тут зіткнувся з новою проблемою. Неможливо знайти модуль './in-memory-data.service'.
Каннан T

@kannan - 1. Чи встановлений angular-in-memory-web-apiз npm? 2. Чи є запис angular-in-memory-web-apiу вашому package.json? 3. спробуйте вбити та перезапустити кутовий CLI: Ctrl+Cвбити; ng serveперезапустити). Іноді CLI діє дивно (Дітто для кутового плагіна для VSCode)
Master of Ducks

@MasterofDucks Bro вирішив цю проблему вчора, якщо я не створив файл, саме тому. дякую за допомогу :)
Каннан T

15

Це працює для мене:

У наборі блоку залежностей пакет.json (використовуйте "angular" замість "angular2")

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

Потім бігайте

 npm install

АБО

просто запустіть (бажано)

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

14

Наразі я займаюся навчальним посібником і у мене була схожа проблема. Що , схоже, закріпилися це для мене є визначенням основного файлу для 'angular2-in-memory-web-api'в packagesзмінному systemjs.config.js:

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

Перш ніж я додав це, сталася помилка 404, в якій було зроблено /node_modules/angular2-in-memory-web-api/спробу завантаження файлу JavaScript. Тепер він завантажує /node_modules/angular2-in-memory-web-api/index.jsта інші файли в цьому модулі.


2
Наразі, як видається, є декілька помилок із HTTP-розділом підручника «Tour of Heroes».
Грант Тейлор

Це не допомагає моїй помилці (про помилку, про яку йдеться).
тоні

Спершу мені довелося оновити ´angular2-in-memory-web-api´ (див. Відповідь від @traneHead), а потім застосувати цю відповідь.
тоні

Дякую, вирішив мою проблему. Мені не потрібно було набиватися до 0,0.10, як пояснюють інші.
Радек Скокан

10

Це вирішило проблему 404

З кутової документації Angular in-memory-web-api

Завжди імпортуйте InMemoryWebApiModule після HttpModule, щоб переконатися, що постачальник XHRBackend InMemoryWebApiModule замінює всі інші.

Імпорт модуля повинен містити InMemoryWebApiModule, вказаний після HttpModule

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

1
Також важливо, що це відбувається після імпорту таких маршрутів, як AppRoutingModule, в демонстрацію Angular2. У мене був AppRoutingModule після InMemoryWebApiModule.forRoot (InMemoryDataService), і він все порушує.
Марк

6

З вашої кореневої папки (папка містить package.json), використовуючи:

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

працював для мене, використовуючи новий посібник для швидкого старту з Angular-cli
OST

@OST Чувак навіть використовую angular-cli, але зіткнувся з цією помилкою Неможливо знайти модуль './in-memory-data.service'.
Каннан Т

5

Найпростішим рішенням, про який я міг придумати, було встановлення пакету з npm та перезапуск сервера:

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

Я майже встановив пакунок angular2-in-memory-web-api , але на сторінці npm йдеться:

Усі версії після 0.0.21 постачаються (або незабаром будуть) поставлені під кутом пам'яті web-api .

Примітка . Це рішення працювало для проекту, створеного за допомогою інструментів CLI, який не перераховує пакет як залежність і не може вирішити проблему для проектів, створених із насінням Quickstart, який перераховує пакет як залежність. .


Моя проблема полягала в тому, що ng serveвона все ще працює, поки ця програма встановлюється. Довелося його вимкнути та перезапустити.
Jorn.Beyers

4

Я використовую кутовий 4 і нижче вирішив свою проблему.

npm встановити angular-in-memory-web-api --save


привіт, навіть я використовую кутовий 4, як я це зробив, як ви сказали, але тут виникає нова проблема. Неможливо знайти модуль './in-memory-data.service'.
Каннан Т

3

Це було справжнім смердюком. Завдяки @traneHead, @toni та іншим, ці кроки працювали для мене.

  1. Оновити angular2-in-memory-web-apiдо0.0.10
  2. Відредагуйте властивість змінної пакетів у systemjs.config.js:

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


Це відео також може бути корисним: Angular2 Підручник - HTTP
AnderSon

3

Я створюю свій проект, використовуючи angular-cli, і я встановлюю в package.json "angular-in-memory-web-api": "^ 0.2.4" у блоці залежності, а потім запускаю npm install.

Робота для мене: D


Будь-які рекомендації щодо того, який рахунок спричиняє це питання? Або яку конфігурацію вони могли перевірити або змінити, щоб усунути проблему? Можливо, вміст вашого "package.json" може допомогти.
Джошуа Брифінг

3

Для користувачів, які створили порожній проект з кутовим кліпом 1.4.9 (актуально на жовтень 2017 року), а потім почали виконувати інструкції покроково, просто запустіть таку команду:

npm i angular-in-memory-web-api

Просто ця команда, без нічого додаткового.

Сподіваюся, що це економить чийсь час


2

Якщо ви використовуєте кутовий кліп, ви отримаєте цю помилку.

Будь ласка, додайте 'angular2-in-memory-web-api'у const barrelsфайл system-config.ts, як показано нижче:

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

І додайте 'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'як нижче.

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,

});

Відновити за допомогою npm start. Це вирішило для мене питання.


0

Спробуйте додати визначення машинопису:

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

... із зазначенням назви залежності:

angular2-in-memory-web-api

Потім додайте точку входу для "angular2-in-memory-web-api" в /systemjs.config.js

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

Я встановив типінги, як ти писав. Це змінило вміст папки типізації (додав "\ definitions \ in-memory-backend.service \ index.d.ts" до браузера та основних підпапок, а також додав посилання у файли browser.d.ts та main.d.ts ). Що ви маєте на увазі під зазначенням імені залежності? Я додав точку входу, як ви вказали. Але моя помилка все ще зберігається.
тоні

Коли ви запускаєте "типи типів встановити ...", типінги повинні запитати у вас "Що таке назва залежності?" і тоді ви можете ввести "angular2-in-memory-web-api".
користувач1014932

Моя відповідь застосована до angular2-in-memory-web-api v0.0.7 btw.
користувач1014932

0

У мене була така ж проблема, я змінився в systemjs.config:

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

За цим рядком:

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

0

Зміна цього рядка, як було запропоновано вище, працювало для мене в навчальному посібнику Angular 2 Heroes:

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


0

Основна відповідь мені допомогла: змінити

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

до

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

0

у програмі \ main.ts просто модифікуйте:

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

до:

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

потім додайте параметр index.js в

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

в systemjs.config.js

це робота для мене.


0

Останнє виправлення на цю дату - це

  1. замініть всі екземпляри "angular2-in-memory-web-api" на "angular-in-memory-web-api".
  2. Змінення версії залежності package.json з "angular-in-memory-web-api": "0.0.20"на "angular-in-memory-web-api": "0.1.0" та "zone.js": "^0.6.23"на"zone.js": "^0.6.25"
  3. У systemjs.config.js змініть шлях до index.js. Він повинен виглядати так:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

0

Станом на останній час (наразі 0,1.14), це те, що зазначено в CHANGELOG

У systemjs.config.jsвас повинні змінити відображення на:

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

потім видаліть із packages:

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

0

Я отримав цю помилку, тому що я імпортував InMemoryWebApiModuleз себе, angular2-in-memory-web-apiя видалив 2. Насправді у мене було два записи у файлі package.json; один був, angular2-in-memory-web-apiа другий був angular-in-memory-web-api. Використання angular-in-memory-web-apiвирішило проблему для мене. Тож ваш імпорт має бути таким:

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

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

Використовуючи кліт-кут, вам нічого не потрібно змінювати system.config.js.


0

Для мене просто працює установка з каталогу angular-tour-of-hero

C: \ nodejs \ angular-tour-of-hero> npm встановити angular-in-memory-web-api --save



0

Я зіткнувся з подібною проблемою. я просто завантажив весь приклад наприкінці частини 7 (остання частина) підручника і провів його. Це спрацювало.

Звичайно, спочатку потрібно встановити і скласти все.

> npm install
> npm start

Я також змінив "app-root" на "my-app" в app.component.ts.


0

Якщо для купівлі програми angular2 використовується кутовий кліп, включаючи angular2-in-memory-web-api, це три етапи:

  1. додайте api до файлу system-config.ts (всередині підкаталогу src), як показано нижче:

    /** 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. Додайте

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

до масиву vendorNpmFiles у файлі angular-cli-build.js, як у згадуванійShard;

  1. Звичайно, додайте до package.json, як описано traneHead; для 2.0.0-rc.3 Я використовую версію нижче:

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

Я вважаю, що це посилання "Додавання матеріалу2 до вашого проекту" пояснює процес додавання сторонніх бібліотек досить чітко.


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

InMemoryDataServiceКлас не підпадає під який - або API. Нам потрібно створити клас обслуговування, а потім імпортувати цей клас обслуговування у файл app.module.ts.


-1

Тоні, Вам потрібно додати типізацію для Angular2-в-пам'яті-web-api.

Додайте їх у свій TS-файл.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.