Angular2 Учебник (тур по героям): не удается найти модуль 'angular2 -in-memory-web-api' - программирование
Подтвердить что ты не робот

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

Я следил за Tutorial. После изменения 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
]);
4b9b3361

Ответ 1

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

В package.json установите

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

в блоке dependecies, а в systemjs.config.js установите

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

в объекте packages.

Ответ 2

Что касается проектов, созданных с использованием текущих инструментов CLI, он работал у меня, установив

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

а затем выполнить импорт как

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

My 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"   }

Ответ 3

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

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

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

Обратите внимание на " 2" в названии.

Однако, ссылаясь на InMemoryWebApiModule, он использовал 'angular -in-memory-web-api' без 2 в имени. Поэтому я добавил его, и он решил проблему:

import {InMemoryWebApiModule} из 'angular2 -in-memory-web-api';

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

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

Ответ 4

Angular 4 Изменения

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

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

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

Точки путаницы

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

  • angular-in-memory-web-api был переименован; он отбрасывает 2 от angular 2 до простого angular
  • CLI Angular больше не использует SystemJS (заменен Webpack), поэтому systemjs.config.js больше не существует.
  • npm package.json не следует редактировать напрямую; используйте CLI.

Решение

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

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

Удачи там!

Ответ 5

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

В блоке блоков зависимостей package.json(используйте "angular" вместо "angular2" )

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

Затем запустите

 npm install

ИЛИ

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

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

Ответ 6

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

Ответ 7

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

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

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

Импорт модулей должен иметь InMemoryWebApiModule, указанный после HttpModule

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

Ответ 8

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

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

Ответ 9

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

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

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

Все версии после 0.0.21 (или скоро будут) отправлены в соответствии с angular в оперативной памяти-веб-апи.

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

Ответ 10

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

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

Ответ 11

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

  • Обновление angular2-in-memory-web-api до 0.0.10
  • Изменить свойство переменной пакетов в systemjs.config.js:

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

Ответ 12

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

Работайте со мной: D

Ответ 13

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

npm i angular-in-memory-web-api

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

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

Ответ 14

Если вы используете 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. Это разрешило проблему для меня.

Ответ 15

Попробуйте добавить определения 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.config.js

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

Ответ 16

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

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

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

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

Ответ 17

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

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

Ответ 18

Я решил скопировать index.js и index.d.ts в core.js и core.d.ts, то есть внутри папки node_modules/angular2-in-memory-web-api. Пойдите, выясните.

Ответ 19

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

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

к

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

Ответ 20

в 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

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

Ответ 21

При использовании angular cli для создания вашего приложения angular2, включая angular2 -in-memory-web-api, задействованы три шага:

  • добавить 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' }
    };
    
  • Добавить

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

в массив vendorNpmFiles в файле angular -cli-build.js, например, упомянутого выше;

  1. Конечно, добавьте в package.json, как описано traneHead; для 2.0.0-rc.3 Я использую следующую версию:

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

Я нахожу это ссылка "Добавление материала2 в ваш проект" объясняет процесс добавления сторонних библиотек довольно четко.

Ответ 22

Последнее исправление с этой даты -

  • заменить все экземпляры "angular2 -in-memory-web-api" на "angular -in-memory-web-api".
  • Измените версию зависимости 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"
  • В systemjs.config.js измените путь для index.js. Это должно выглядеть так: 'angular-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }

Ответ 23

Начиная с последнего (в настоящее время 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'      
}

Ответ 24

Я получил эту ошибку, потому что я импортировал 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.

Ответ 25

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

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

Ответ 26

Лучший способ - установить его с помощью NPM, например

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

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

Ответ 27

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

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

> npm install
> npm start

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

Ответ 28

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

Класс InMemoryDataService не подходит под API. Нам нужно создать класс обслуживания, а затем импортировать этот класс обслуживания в файл app.module.ts.

Ответ 29

Toni, Вам нужно добавить пиктограммы для Angular2 -in-memory-web-api.

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

/// reference path="./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts"