Учебник Angular2 (Tour of Heroes): не удается найти модуль 'angular2-in-memory-web-api'

Я следил за учебник. После изменения 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

]);
609   29  

29 ответов:

для меня единственным решением было обновить angular2-in-memory-web-api до 0.0.10.

на package.json set

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

в блоке dependecies и в systemjs.config.js set

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

на

64  
2016-05-24 11:28:13

Что касается проектов, созданных с использованием текущих инструментов 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"   }
94  
2017-03-23 10:37:38

вот что сработало для меня:

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

"угловые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

Как В. 0.1.0, НПМ пакет был переименован из angular2-in-memory-web-api к его текущему имени, angular-in-memory-web-api. Все версии после 0.0.21 погружены вниз это имя. Обязательно обновите свой пакет.операторы json и import.

20  
2016-09-27 03:50:32

Угловые 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

удачи!

17  
2017-10-17 14:48:09

в настоящее время я делаю учебник и имел аналогичную проблему. То, что, кажется, исправило это для меня, определяет основной файл для '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 и другие файлы в этом модуле.

14  
2016-05-22 22:26:53

это работает для меня:

в пакет.JSON в зависимости блок набор ( использовать "угловые", а не "angular2")

"angular-in-memory-web-api": "^0.3.2",
выполнить 
 npm install

или

просто просто запустите (мой предпочтительный)

npm install angular-in-memory-web-api --save
13  
2017-06-09 13:15:37

это решило проблему 404

из документации Angular in-memory-web-api

всегда импортируйте InMemoryWebApiModule после HttpModule, чтобы убедиться, что поставщик XHRBackend InMemoryWebApiModule заменяет все остальные.

модуль импорта должен иметь InMemoryWebApiModule перечислены после HttpModule

@NgModule({
imports:      [ BrowserModule,
              AppRoutingModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService),
              ...
9  
2017-01-29 13:39:17

из корневой папки (папка содержит пакет.json), используя:

npm install angular-in-memory-web-api –-save
6  
2017-07-30 11:20:17

Я использую угловой 4 и ниже решил мою проблему.

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

4  
2017-07-11 14:01:15

самое простое решение, которое я мог придумать, это установить пакет с npm и перезапустить сервер:

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

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

все версии после 0.0.21 (или скоро будут) погружены вниз angular-in-memory-web-api.

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

4  
2018-03-01 04:40:24

Это была настоящая вонючка. Благодаря @traneHead, @toni и другим, эти шаги сработали для меня.

  1. обновление angular2-in-memory-web-api до 0.0.10
  2. измените свойство переменной packages в systemjs.config.js:

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

3  
2016-05-24 03:35:51

Я создаю свой проект с помощью angular-cli и устанавливаю в пакет.json "angular-in-memory-web-api": "^0.2.4" в блоке зависимостей, а затем я запускаю установку npm.

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

3  
2017-01-07 04:50:42

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

npm i angular-in-memory-web-api

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

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

3  
2017-10-25 19:04:00

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

пожалуйста, добавьте 'angular2-in-memory-web-api' на const barrels в системе-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. Это решило проблему для меня.

2  
2016-07-29 10:17:10

попробуйте добавить определения typescript:

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.конфиг.js

var packages = {
  ...
  'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
};
0  
2016-05-22 23:05:56

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

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

эта строка :

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
0  
2016-05-23 13:58:43

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

'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
0  
2016-05-24 00:04:12

я решил это копирование index.js и index.d.ts to core.js и core.d.ts, что находится внутри . Иди разберись.

0  
2016-05-25 07:54:08

основной ответ помог мне: изменить

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

до

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
0  
2016-06-02 15:47:28

в приложении\main.ТС просто изменить:

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

to:

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

затем добавить индекс.параметр JS в 

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

в systemjs.конфиг.js

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

0  
2016-06-10 23:33:19

последнее исправление на эту дату-это

  1. заменить все экземпляры "angular2-в-памяти-веб-API" с "угловой-в-памяти-веб-АФИ".
  2. пакета изменений.версия зависимости 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.конфиг.js, измените путь для индекса.js. Это должно выглядеть так:
    'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
0  
2016-10-23 09:10:14

по состоянию на последнюю версию (в настоящее время 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  
2016-11-01 03:34:05

я получил эту ошибку, потому что я импортировал InMemoryWebApiModule С angular2-in-memory-web-api Я удалил 2. На самом деле у меня было две записи в моем пакете.файл 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.

0  
2017-03-29 14:27:05

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

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

0  
2017-07-04 11:51:37

лучший способ-установить его с помощью NPM e. G

npm install git+https://github.com/itryan/in-memory-web-api/ -- save

Он добавит необходимую ссылку

0  
2017-07-28 05:47:42

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

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

> npm install
> npm start

Я также изменил "app-root" на "my-app" в приложении.деталь.ТС.

0  
2017-08-10 13:07:46

при использовании угловых командной строки для построения вашего приложения angular2, включая angular2-в-памяти-веб-интерфейс 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. конечно, добавить в пакет.JSON как описанный traneHead; для 2.0.0-rc.3 я использую версию ниже:

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

это ссылке "добавление material2 в ваш проект" довольно четко объясняет процесс добавления сторонних библиотек.

0  
2017-08-11 10:27:35 
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './in-memory-data.service';

The InMemoryDataService класс не подпадает под какой-либо API. Нам нужно создать класс обслуживания, а затем импортировать этот класс обслуживания в приложение.модуль.файл ТС.

0  
2018-04-11 16:10:51

Тони, Вам нужно добавить типизации для Angular2-in-memory-web-api.

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

/// reference path=”./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts”
-1  
2016-05-22 21:31:40

Comments

    Ничего не найдено.
Click here to cancel reply.