Angular 2 + angular-in-memory-web-api zone GET http://localhost:3000/traceur 404 (Not Found)

Question

Hi I have a problem with angular-in-memory-web-api. I tried to use angular2-in-memory-web-api in SystemJS and another solutions her but with no result. I\'m using official quick

Answer 1

Version 0.1.13 of angular2-in-memory-web-api had some breaking changes and it looks like the tutorial has not been updated yet.

According to the changelog:

In systemjs.config.js you should change the mapping to:

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

then delete from packages:

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

Link to the chang https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20

An issue has also been filed https://github.com/angular/in-memory-web-api/issues/58

It says to update app.module.ts by changing

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

to

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

Answer 2

For those following the tutorial, after I followed Joel's answer, it let me directly to another problem giving me the following error.

ctorParameters.map is not a function at ReflectionCapabilities.parameters

It let me to this answer: Updating angular-in-memory-wep-api

I had to update the "angular-in-memory-web-api" from 0.1.13 to 0.2.0 in packages.json

Answer 3

For some reason, I was still getting the same error even after following @joel's answer and the issue on github.

In case if anyone is facing the same issue, follow the below steps:

Add the below line to the "map" object in the systemjs.config.js file

'angular-in-memory-web-api': 'node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

Essentially, here you are pointing to the umd.js file which is present in your node_modules folder.

In the packages object of the systemjs.config.js file, add the below line

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

These changes work only on versions greater than 0.1.13, Hence please verify in your package.json if "angular-in-memory-web-api" has a version greater than or equal to 0.1.13, i.e,

"angular-in-memory-web-api": "~0.1.13", 

Hope this helps!

Answer 4

Even after I tried everything mentioned before I still got this error:

"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>]

Then I realized, that it only occurs during tests with karma (no ... I do not try start the server if tests fail).

This worked for me:

• systemjs.config.js as described by others here (and meanwhile fixed in original sample code): '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 }, ]

additional I had to set a provider for { provide: APP_BASE_HREF, useValue: "/" } because karma doesn't use the index.html

finally all tests passed and I can do my "npm start" :-)