Angular 2 + angular -in-memory-web-api zone GET http://localhost: 3000/traceur 404 (не найдено)
Привет У меня проблема с angular -in-memory-web-api. Я попытался использовать angular2 -in-memory-web-api в SystemJS, а другой - ее, но без результата. Я использую официальный шаблон быстрого запуска.
Благодарим вас за помощь.
Список ошибок
zone.js:1382 GET http://localhost:3000/traceur 404 (Not Found)
dashboard:19 Error: (SystemJS) XHR error (404 Not Found) loading
http://localhost:3000/traceur
Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/traceur
Unable to load transpiler to transpile http://localhost:3000/node_modules/angular-in-memory-web-api/in-memory-web-api.module.js
Error loading http://localhost:3000/node_modules/angular-in-memory-web-api/in-memory-web-api.module.js as "angular-in-memory-web-api/in-memory-web-api.module" from http://localhost:3000/app/app.module.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/traceur
Unable to load transpiler to transpile http://localhost:3000/node_modules/angular-in-memory-web-api/in-memory-web-api.module.js
Error loading http://localhost:3000/node_modules/angular-in-memory-web-api/in-memory-web-api.module.js as "angular-in-memory-web-api/in-memory-web-api.module" from http://localhost:3000/app/app.module.js
Мой консигнатор JS
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"docker-build": "docker build -t ng2-quickstart .",
"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
"pree2e": "npm run webdriver:update",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"postinstall": "typings install",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"webdriver:update": "webdriver-manager update"
},
"keywords": [],
"author": "",
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"@angular/upgrade": "~2.1.0",
"angular2-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"systemjs": "0.19.39",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"lodash": "^4.16.2",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^3.3.0",
"rimraf": "^2.5.4"
},
"repository": {}
}
Модуль приложения
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {HttpModule} from "@angular/http";
import { AppRoutingModule } from './app-routing.module';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
import { InMemoryDataService } from './in-memory-data.service';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule
],
declarations: [
AppComponent,
DashboardComponent,
HeroDetailComponent,
HeroesComponent
],
providers: [ HeroService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Ответы
Ответ 1
Версия 0.1.13 из angular2-in-memory-web-api
имела некоторые изменения, и похоже, что учебник еще не обновлен.
В соответствии с изменением:
В systemjs.config.js вы должны изменить отображение на:
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
затем удалите из пакетов:
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
Ссылка на чанг
https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20
Также была отправлена проблема https://github.com/angular/in-memory-web-api/issues/58
В нем говорится обновить app.module.ts
, изменив
import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
к
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
Ответ 2
Даже после того, как я попробовал все, что упоминалось ранее, я все еще получил эту ошибку:
"originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js\n\tError: XHR error (404 Not Found) loading node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js\n\t at XMLHttpRequest.wrapFn [as _onreadystatechange] (node_modules/zone.js/dist/zone.js:889:29) [<root>]\n\t at Zone.runTask (node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
Тогда я понял, что он встречается только во время тестов с кармой (нет... я не пытаюсь запустить сервер, если тесты не работают).
Это сработало для меня:
-
systemjs.config.js, как описано другими здесь (и между тем фиксировано в исходном образце кода): 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
-
karma.conf.js:
files: [
(...)
'node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
(...)
{ pattern: 'node_modules/angular-in-memory-web-api/**/*.js', included: false, watched: false },
]
Дополнительно мне пришлось установить поставщика для { provide: APP_BASE_HREF, useValue: "/" }
, потому что карма не использует index.html
Наконец, все тесты прошли, и я могу выполнить свой "npm start": -)
Ответ 3
По какой-то причине я по-прежнему получал такую же ошибку даже после ответа @joel и вопроса о github.
Если кто-то сталкивается с той же проблемой, выполните следующие шаги:
Добавьте приведенную ниже строку к объекту "map" в файле systemjs.config.js
'angular-in-memory-web-api': 'node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
По существу, здесь вы указываете на файл umd.js, который присутствует в вашей папке node_modules.
В объекте пакетов файла systemjs.config.js добавьте строку ниже
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
Эти изменения работают только на версиях, превышающих 0.1.13. Поэтому, пожалуйста, проверьте в package.json, если "angular -in-memory-web-api" имеет версию больше или равным 0,1,13, т.е.
"angular-in-memory-web-api": "~0.1.13",
Надеюсь, это поможет!
Ответ 4
Для тех, кто следит за учебным пособием, после того, как я последовал за Джоэл, я позвонил прямо к другой проблеме, указав мне следующую ошибку.
ctorParameters.map is not a function at ReflectionCapabilities.parameters
Это позволило мне ответить на этот вопрос: Обновление angular -in-memory-wep-api
Мне пришлось обновить "angular -in-memory-web-api" с 0.1.13 до 0.2.0 в packages.json