Angular2 tutorial app does not load (http section)

Question

I'm having a hard time to get my local code to work in the http section of the angular 2 tutorial link. It stops working after the inclusion of the in-memory DB service right after the changes to hero.service.ts. What actually happens is that the app simply refuses to load and gets stuck in the loading screen. I have found various posts regarding this but none catched my problem. I still guess that is has something to do with angular-in-memory-web-api or the like. I don't know where to look for more details or how to fix this problem.

systemjs.config.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',
      // 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",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "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",
    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings":"^1.4.0"
  }
}

in-memory-data.service.ts

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

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    let heroes = [
      {id: 11, name: 'Mr. Nice'},
      {id: 12, name: 'Narco'},
      {id: 13, name: 'Bombasto'},
      {id: 14, name: 'Celeritas'},
      {id: 15, name: 'Magneta'},
      {id: 16, name: 'RubberMan'},
      {id: 17, name: 'Dynama'},
      {id: 18, name: 'Dr IQ'},
      {id: 19, name: 'Magma'},
      {id: 20, name: 'Tornado'}
    ];
    return {heroes};
  }
}

Browser console shows:

08:16:31.929 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/zone.js/dist/zone.js:698:26
ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:265:21
Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:154:28
ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:335:28

Error loading http://localhost:3000/traceur
Unable to load transpiler to transpile http://localhost:3000/node_modules/angular-in-memory-web-api/index.js
Error loading http://localhost:3000/node_modules/angular-in-memory-web-api/index.js as "angular-in-memory-web-api" from http://localhost:3000/app/app.module.js
Stack-Trace:
(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
    patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/zone.js/dist/zone.js:698:26
    ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:265:21
    Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:154:28
    ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:335:28

Error loading http://localhost:3000/traceur
Unable to load transpiler to transpile http://localhost:3000/node_modules/angular-in-memory-web-api/index.js
Error loading http://localhost:3000/node_modules/angular-in-memory-web-api/index.js as "angular-in-memory-web-api" from http://localhost:3000/app/app.module.js1localhost:3000:16:49
<anonym>localhost:3000:16
ZoneDelegate.prototype.invoke()zone.js:232
Zone.prototype.run()zone.js:114
scheduleResolveOrReject/<()zone.js:502
ZoneDelegate.prototype.invokeTask()zone.js:265
Zone.prototype.runTask()zone.js:154
drainMicroTaskQueue()zone.js:401
ZoneTask/this.invoke()zone.js:339

have you added `HttpModule` in `NgModule`? – micronyks Oct 26 '16 at 16:29 — micronyks, Oct 26 '16 at 16:29
Can you see any console error and post if any? – The_ehT Oct 26 '16 at 16:33 — The_ehT, Oct 26 '16 at 16:33

score 0 · Answer 1 · edited May 23 '17 at 11:46

I had lots of troubles with this in-memory-web-api and would rather avoid it at all if not for the tutorial. I think it's easier to pop-up a simple backend and test for real rather than deal with it.

The problem I had were resolved by referencing one exact version of the library, and I am afraid I can't remember which exact one is that, but you can try 0.0.10 as in this post. You can reference the version you need in package.json (be sure to reference the exact version, i.e. without "~").

If that does not help I can try to figure out later which version worked for me. You can also check the errors in the console since you might have some other problems as well.

score 0 · Answer 2 · answered Oct 26 '16 at 16:41

It's because the ~ in the version "angular-in-memory-web-api": "~0.1.5" grabs the latest patch version, which is currently 0.1.13. There have been breaking changes since 0.1.5 that involves how we load the module.

See the CHANGELOG

Going to umd changes your systemjs.config and the way you import the library.

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'      
}
You must ES import the in-mem module (typically in AppModule) like this:
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

This did not work for me. After applying the changes mentioned in the readme file I receive following output after npm start: `$ npm start > angular-quickstart@1.0.0 start /home/maik/repos > tsc && concurrently "tsc -w" "lite-server" app/main.ts(1,1): error TS6053: File '/home/maik/repos/app/node_modules/angular2/typings/browser.d.ts' not found. node_modules/@types/core-js/index.d.ts(21,14): error TS2300: Duplicate identifier 'PropertyKey'. node_modules/@types/core-js/index.d.ts(1513,5): error TS2300: Duplicate identifier 'export='...and so on.` — Brausepaul, Oct 31 '16 at 06:09

Angular2 tutorial app does not load (http section)

2 Answers2