When attempting to access http://localhost:3000/traceur in Angular 2 with the angular-in-memory-web-api, a 404 (Not Found) error

Hello, I'm encountering an issue with angular-in-memory-web-api. I have attempted to use angular2-in-memory-web-api in SystemJS and other solutions, but without success. I am currently using the official quickstart template. Thank you for any assistance.

List of Errors

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

My consignJS

/**
 * 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": {}
}

App Module

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 { }
javascriptapiangulartypescript

Answer №1

Version 0.1.13 of angular2-in-memory-web-api introduced significant changes that seem to have not been reflected in the tutorial yet.

The changelog indicates the following updates need to be made:

In systemjs.config.js, adjust the mapping to:

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

and then remove from packages:

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

For more details, refer to the changelog https://github.com/angular/in-memory-web-api/blob/master/CHANGELOG.md#0113-2016-10-20

A related issue has been logged https://github.com/angular/in-memory-web-api/issues/58

The update also requires modifying 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

Despite trying all the solutions mentioned earlier, I continued to encounter the following 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>]

Upon further investigation, I discovered that this issue only arises during karma tests (and no, I do not attempt to start the server if tests fail).

This solution resolved the problem for me:

  • Updated the systemjs.config.js file as suggested by others here (and subsequently fixed in the original sample code): 

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

  • Included the following in 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 },
]

Additionally, I had to define a provider for 

{ provide: APP_BASE_HREF, useValue:  "/" }
because karma does not utilize the index.html file.

After implementing these changes, all tests passed successfully and I was able to proceed with "npm start" :-)

Answer №3

Even after following advice from @joel and researching on github, I was still encountering the same error.

If you are experiencing a similar issue, try the following steps:

Insert this line into the "map" object in your systemjs.config.js file:

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

This points to the umd.js file located in the node_modules directory.

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

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

These modifications are only effective for versions higher than 0.1.13. Verify in your package.json that "angular-in-memory-web-api" is version 0.1.13 or above, like so:

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

I hope this provides a solution!

Answer №4

After following Joel's solution in the tutorial, it led me to encounter another issue which resulted in the following error message.

ctorParameters.map is not a function at ReflectionCapabilities.parameters

This problem guided me towards finding a resolution here: Updating angular-in-memory-web-api

To resolve this, I needed to update the version of "angular-in-memory-web-api" from 0.1.13 to 0.2.0 in packages.json

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize JavaScript to Forward Subdomain to Main Domain

Utilizing Apache envvars, I have created the MYDOMAIN and MYSUBDOMAIN variables to define 'mydomain.com' and 'sub.mydomain.com'. These variables are then used in the Apache sites-available conf files for website deployment. The 'su ...

javascriptphp

Storing user data on the client side of a website is most effectively accomplished by

I am looking to incorporate the following features: I would like to personalize the user experience by greeting them with their login name on the webpage (e.g. 'Hello, Fred!'). I also want to display or hide certain content based on the user&apo ...

javascripthtmlsecurityweb

Angular (15) Encountering difficulties in expanding a typed FormGroup

Currently, I am experimenting with typed FormGroup. This is what I have created so far: export interface CustomFormControls { name: FormControl<string|null> content: FormControl<string|null> } export class CustomForm extends FormGroup< ...

angularforms

Bringing in a directive to a component in Angular

Can the Directive be imported into a Component without adding it to ngModule.declarations? I came across the CustomDirective for Telerik Angular Grid, which recommends using custom directives in the grid. However, I only need this directive in one compone ...

angularangular2-directiveskendo-ui-angular2

Setting up RTL (Right to Left) functionality in Material UI version 5 - A Step-by-Step Guide

After updating my app to version 5 of Material-UI from version 4, I noticed that the RTL support is no longer functioning. I carefully followed the instructions in the documentation: https://mui.com/guides/right-to-left/ The current outcome is that the ...

javascriptreactjsmaterial-ui

using document references in puppeteer's evaluate/waitFor function

I'm feeling a bit lost when it comes to understanding the document reference in puppeteer's evaluate method. The official documentation shows some code that includes this reference within a waitFor function in a node script. I get that these line ...

javascriptnode.jsgoogle-chrome-devtoolspuppeteer

How to Make Buttons Vanish and Reappear

Check out this fiddle for a picture button 'scroller' that I created. It may not be perfect, but my main focus is on making the arrow buttons fade in and out when reaching the end of the picture order. I am considering using a JavaScript functio ...

javascriptjquery

Locate a piece of text with jQuery and enclose it within a specified container

Check out this code <form method="get" name="form_delivery"> Pick the country where you want your delivery<br> <select name="deliverymethod"> <option value="0" selected="selected">Choose a country / region</option> ...

javascriptjqueryhtml

Exploring different ways to customize the grid style in Angular 6

Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...

cssangulargrid

Only the initial element within the specified class is targeted by JQuery

Currently, I am utilizing Kendo UI to refresh multiple charts by class without having to access each one individually. Here is the code snippet I am using: $(".k-chart").data("kendoChart").refresh(); The issue I am encountering is that only the first cha ...

javascriptjquerykendo-ui

Populating a data grid with several objects within a JSON object

I am currently developing a project utilizing React with typescript and materialUi. My task is to retrieve data from a JSON fetch request and display it in a DataGrid. The structure of the JSON data is as follows: { id: "1234567890", number: ...

reactjstypescriptmaterial-ui

Ways to transfer information from a function within one element to another element

I have two components: one that logs the indexes of a carousel and I need to pass these indexes into the second component. First Component <template> <div class="container container--white"> <Header /> <carousel-3d @a ...

javascriptvue.js

Having trouble updating Angular CLI

It appears that I have successfully installed version 9 as per the usual installation process. npm install -g @angular/cli npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9abbca8acbcaaad99ebf7e1e1f7eb"> ...

angularnpmangular-clinode-modules

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Angular API snapshot error: The type 'IJobs' does not match the expected type 'IJobs[]'

Currently, I am in the process of learning and attempting to construct a job board using Angular 10. Although my API setup seems to be functioning properly, when navigating to the job detail page on Chrome, an error is displayed: ERROR in src/app/job-det ...

angulartypescriptapi

I'm receiving an error message stating that 'This command is not available when running the Angular CLI outside a workspace,' even though I am in the correct folder

Upon starting my Angular project, which I cloned from GitHub and initiated using the command line "ng serve" or "ng serve -o", I encountered the following error: "Error: This command is not available when running the Angular CLI outside a workspace." My pr ...

angularnpmbuild-error

Information is being received, but unfortunately, it cannot be displayed

Currently, I am experimenting with using the axios http request to showcase some data. My focus is on exploring how to exhibit api data on the client side with react. If you are interested in seeing my progress so far, feel free to check out the link belo ...

javascriptreactjsdebugging

Efficiency boost: Implementing ajax to load content

Let's discuss the best methods for optimizing content loading with ajax. I will outline a few techniques and provide my insights on each one. Loading html directly - This method makes it easy to load content without much additional processing requir ...

javascriptjqueryajaxoptimization

What could be causing the DATE_SUB function to fail in executing a MySQL query through Node.js?

I am encountering an issue with a datetime field in a MySQL database table on Planetscale. My goal is to subtract some time from the datetime value using the DATE_SUB function. While this operation works smoothly in the database console on Planetscale&apos ...

javascriptmysqlnode.jsnode-mysql2planetscale

Can you please explain the function of this JavaScript code for the Isotope filter?

I am struggling to grasp the functionality of a section of vanilla JS code related to the Isotope filter. You can find the original code here. var buttonGroups = document.querySelectorAll('.button-group'); for (var i = 0; i < buttonGroups.le ...

javascript