Angular2 Tutorial (Tour of Heroes): не удается найти модуль 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
]);
angular import angular-tour-of-heroes Тони
источник

Ответы:

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объекте.

TraneHead
источник
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.
ofShard 02
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';

Мой 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
Спасибо, мне также пришлось импортировать 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 02
Как @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

Начиная с версии 1.0.1.0, пакет npm был переименован из angular2-in-memory-web-api в его текущее имя angular-in-memory-web-api. Все версии после 0.0.21 поставляются под этим именем. Обязательно обновите свой package.json и операторы импорта.

Exocomp
источник
18

Angular 4 изменения

По состоянию на 17 октября 2017 г. в руководстве не упоминается, что angular-in-memory-web-apiне входит в стандартную сборку интерфейса командной строки и должно быть установлено отдельно. Это легко сделать с помощью npm:

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

Это автоматически обрабатывает необходимые изменения package.json, поэтому вам не нужно вносить изменения самостоятельно.

Пункты замешательства

Этот поток довольно сбивает с толку, поскольку интерфейс командной строки Angular значительно изменился с момента его запуска; проблема со многими быстро развивающимися API.

  • angular-in-memory-web-apiбыл переименован; он понижает 2 с углового 2 до простогоangular
  • 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 update и затем попробовать установку, описанную выше.
Джейсон
1
Здесь возникла новая проблема. Не удается найти модуль ./in-memory-data.service.
Kannan T
@kannan - 1. Установлен ли angular-in-memory-web-apiс npm? 2. Есть ли angular-in-memory-web-apiв вашем package.json? 3. попробуйте убить и перезапустить Angular CLI: Ctrl+Cубить; ng serveначать заново). Иногда CLI ведет себя странно (то же самое для плагина Angular для VSCode)
Master of Ducks
@MasterofDucks Братан решил это вчера, проблема заключалась в том, что я не создал файл, поэтому. спасибо за вашу помощь :)
Kannan T
15

Меня устраивает:

В наборе блоков зависимостей package.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.
Kannan T
5

Самым простым решением, которое я мог придумать, было установить пакет с помощью npm и перезапустить сервер:

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

Я почти установил пакет angular2-in-memory-web-api , но на странице npm говорится:

Все версии после 0.0.21 поставляются (или скоро будут) поставляться под angular-in-memory-web-api .

Примечание . Это решение работало для проекта, созданного с помощью инструментов интерфейса командной строки, в котором пакет не указан как зависимость и может не решить проблему для проектов, созданных с помощью начального числа Quickstart, в котором пакет указывается как зависимость. .

Ноктюрно
источник
Моя проблема заключалась в том, что ng serveона все еще работала, пока она устанавливалась. Пришлось выключить и перезапустить.
Йорн Бейерс
4

Я использую angular 4, и ниже моя проблема решена.

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

Вишал Бирадар
источник
привет, даже я использую angular 4, я сделал, как вы сказали, но столкнулся с новой проблемой здесь. Не могу найти модуль ./in-memory-data.service.
Kannan T
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

Для пользователей, которые сгенерировали пустой проект с помощью angular cli 1.4.9 (актуально на октябрь 2017 г.), а затем начали выполнять пошаговые инструкции, просто выполните следующую команду:

npm i angular-in-memory-web-api

Только эта команда, без чего-либо дополнительного.

Надеюсь, что сэкономит время

Юрий Братчук
источник
2

Если вы используете angular cli, вы получите эту ошибку.

Пожалуйста, добавьте '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' }
};
user1014932
источник
Я установил машинки как вы написали. Это изменило содержимое папки типов (добавлено "\ definitions \ in-memory-backend.service \ index.d.ts" в браузер и основные подпапки, а также добавлена ​​ссылка в файлах browser.d.ts и main.d.ts ). Что вы имеете в виду под «указанием имени зависимости»? Я добавил точку входа, как вы указали. Но моя ошибка все еще сохраняется.
Toni
Когда вы запускаете команду «sudo typings install ...», вы должны спросить: «Какое имя зависимости?» а затем введите "angular2-in-memory-web-api".
user1014932
Мой ответ относился к angular2-in-memory-web-api v0.0.7 btw.
user1014932
0

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

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

По этой строке:

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
ЗеленыйОбезьянаМальчик
источник
0

Изменение этой строки, как было предложено выше, сработало для меня в Angular 2 Heroes Tutorial:

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
Леонель Вайсблатт
источник
0

Решил копированием index.jsи index.d.tsв core.jsи core.d.ts, то есть внутри node_modules/angular2-in-memory-web-apiпапки. Иди разберись.

Эдуардо Кавальканти
источник
0

Мне помог главный ответ: изменить

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

к

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
Кофе чай
источник
0

в app \ 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)
]
})

Используя cli-angular, вам не нужно ничего менять относительно system.config.js.

Edkeveked
источник
0

Для меня просто установка из каталога angular-tour-of-heroes работает для меня

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

Ашиш Агарвал
источник
0

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

Конечно, сначала нужно все установить и скомпилировать.

> npm install
> npm start

Я также изменил «app-root» на «my-app» в app.component.ts.

Чонг Губ Панг
источник
0

Если вы используете angular cli для создания приложения 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, как упоминалось в ofShard;

  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-in-memory-web-api.

Добавьте их в свой файл TS.

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
Митхун Паттанкар
источник