Я следил за 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
]);
Для меня единственным решением было обновление 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.
Что касается проектов, созданных с использованием текущих инструментов 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" }
Вот что сработало для меня:
Я заметил, что 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 и импорта.
По состоянию на 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 до простого angularsystemjs.config.js больше не существует.npm package.json не следует редактировать напрямую; используйте CLI.По состоянию на октябрь 2017 года лучшим решением является просто установить его самостоятельно, используя npm, как я уже упоминал выше:
$ npm install angular-in-memory-web-api --save
Удачи там!
Это работает для меня:
В блоке блоков зависимостей package.json(используйте "angular" вместо "angular2" )
"angular-in-memory-web-api": "^0.3.2",
Затем запустите
npm install
ИЛИ
просто запустить (предпочтительнее)
npm install angular-in-memory-web-api --save
В настоящее время я делаю учебник и имею аналогичную проблему. По-видимому, для меня это определило основной файл для '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 и другие файлы в этом модуле.
Это решило проблему 404
В документации Angular in-memory-web-api
Всегда импортируйте InMemoryWebApiModule после HttpModule, чтобы гарантировать, что поставщик XHRBackend из InMemoryWebApiModule заменяет все остальные.
Импорт модулей должен иметь InMemoryWebApiModule, указанный после HttpModule
@NgModule({
imports: [ BrowserModule,
AppRoutingModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
...
Из вашей корневой папки (папка содержит package.json), используя:
npm install angular-in-memory-web-api –-save
Самое простое решение, о котором я мог подумать, - это установить пакет с помощью npm и перезапустить сервер:
npm install angular-in-memory-web-api --save
Я почти установил пакет angular2-in-memory-web-api, но на странице npm говорится:
Все версии после 0.0.21 (или скоро будут) отправлены в соответствии с angular в оперативной памяти-веб-апи.
Примечание. Это решение работало для проекта, созданного с помощью инструментов CLI, который не отображает пакет в качестве зависимости, и может не решить проблему для проектов, созданных с помощью начального числа быстрого запуска, в котором перечислен пакет. как зависимость.
Я использую angular 4 и ниже решил мою проблему.
npm install angular -in-memory-web-api -save
Это была настоящая стерва. Благодаря @traneHead, @toni и другим, эти шаги работали для меня.
angular2-in-memory-web-api до 0.0.10systemjs.config.js: angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' }
Я создаю свой проект, используя angular -cli, и я устанавливаю в package.json "angular -in-memory-web-api": "^ 0.2.4" в блоке зависимостей, а затем запускаю npm install.
Работайте со мной: D
Для пользователей, сгенерировавших пустой проект с angular cli 1.4.9 (Actual on October 2017), а затем пошаговые инструкции, выполните следующую команду:
npm i angular-in-memory-web-api
Только эта команда, без каких-либо дополнительных.
Надеюсь, что это экономит время
Если вы используете 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. Это разрешило проблему для меня.
Попробуйте добавить определения 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' }
};
У меня была та же проблема, я изменился в systemjs.config:
'angular2-in-memory-web-api': { defaultExtension: 'js' },
По этой строке:
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
Изменение этой строки, как было предложено выше, работало для меня в Angular 2 Heroes Tutorial:
'angular2-in-memory-web-api': { main: 'core.js', defaultExtension: 'js' },
Я решил скопировать index.js и index.d.ts в core.js и core.d.ts, то есть внутри папки node_modules/angular2-in-memory-web-api. Пойдите, выясните.
Главный ответ помог мне: изменение
'angular2-in-memory-web-api': { defaultExtension: 'js' },
к
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
в 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
он работает для меня.
При использовании 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, например, упомянутого выше;
Конечно, добавьте в package.json, как описано traneHead; для 2.0.0-rc.3 Я использую следующую версию:
"angular2-in-memory-web-api": "0.0.13"
Я нахожу это ссылка "Добавление материала2 в ваш проект" объясняет процесс добавления сторонних библиотек довольно четко.
Последнее исправление с этой даты -
"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"'angular-in-memory-web-api': {
main: 'index.js',
defaultExtension: 'js'
}
Начиная с последнего (в настоящее время 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' }
Я получил эту ошибку, потому что я импортировал 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.
Для меня просто выполняется установка из каталога angular -tour-of-heroes для меня
C:\nodejs\angular -tour-of-heroes > npm install angular -in-memory-web-api -save
Лучший способ - установить его с помощью NPM, например
npm install git + https://github.com/itryan/in-memory-web-api/ --save
он добавит требуемую ссылку
Я столкнулся с аналогичной проблемой. Я просто загрузил весь пример в конце части 7 (последняя часть) учебника и запустил его. Это сработало.
Конечно, вам нужно сначала установить и скомпилировать все.
> npm install
> npm start
Я также изменил "app-root" на "my-app" в app.component.ts.
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
Класс InMemoryDataService не подходит под API. Нам нужно создать класс обслуживания, а затем импортировать этот класс обслуживания в файл app.module.ts.
Toni, Вам нужно добавить пиктограммы для Angular2 -in-memory-web-api.
Добавьте их в свой TS файл.
/// reference path="./../node_modules/angular2-in-memory-web-api/typings/browser.d.ts"