Error on angular2 : (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur

Question

I am facing following error on loading files in code :

(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: 'src/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/bundles/in-memory-web-api.umd.js',
            'jquery': 'npm:jquery/',
            'lodash': 'npm:lodash/lodash.js',
            'moment': 'npm:moment/',
            'ng2-bootstrap': 'npm:ng2-bootstrap',
            'ng2-slim-loading-bar': 'npm:ng2-slim-loading-bar',
            'symbol-observable': 'npm:symbol-observable'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'moment': { main: 'moment.js', defaultExtension: 'js' },
            'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
            'ng2-slim-loading-bar': { main: 'index.js', defaultExtension: 'js' },
            'symbol-observable': { main: 'index.js', defaultExtension: 'js' }
        }
    });
})(this);

and have app.component.ts like this:

import { Component, OnInit, ViewContainerRef } from '@angular/core';
// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

@Component({
    moduleId: module.id,
    selector: 'scheduler',
    templateUrl: 'app.component.html'
})
export class AppComponent {

    constructor(private viewContainerRef: ViewContainerRef) {
        // You need this small hack in order to catch application root view container ref
        this.viewContainerRef = viewContainerRef;
    }
}

and have main.ts file like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

and pakages.json i have like this:

{
  "version": "1.0.0",
  "name": "scheduler",
  "author": "Chris Sakellarios",
  "license": "MIT",
  "repository": "https://github.com/chsakell/angular2-features",
  "private": true,
  "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.6",
    "core-js": "^2.4.1",
    "jquery": "^3.0.0",
    "lodash": "^4.13.1",
    "moment": "^2.13.0",
    "ng2-bootstrap": "^1.3.0",
    "ng2-slim-loading-bar": "1.5.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",
    "gulp": "3.9.1",
    "gulp-replace": "0.5.4",
    "del": "2.2.2",
    "gulp-sourcemaps": "2.2.0",
    "jquery": "^3.0.0",
    "lite-server": "^2.2.0",
    "typescript": "2.0.2",
    "typings": "^1.3.2",
    "tslint": "^3.10.2"
  },
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite --baseDir ./app --port 8000\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  }
}

error image I tried all solutions that mentioned in stakeover flow but I am not able to fix this issue, bower components and node_modules already set and have all files .Looking for your response.

thanks in advance .

Why do you have */ systemcoonfig.js at the begining of system.config.js file? — Karan Garg
– Karan Garg, Commented Jan 28, 2017 at 11:36
no i meant you have written like /*systemconfig.js but you are never closing the comments...try removing this line or close the comments — Karan Garg
– Karan Garg, Commented Jan 28, 2017 at 12:55
you dont have that typo in your code right?because that might be the problem — Karan Garg
– Karan Garg, Commented Jan 28, 2017 at 15:39

Chris Halcrow · Accepted Answer · 2018-01-17 22:12:32Z

2

I spent hours on this issue and finally I fixed this by changing line in system.config.js in main section

 map: {
            // our app is within the app folder
            app: 'src/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/bundles/in-memory-web-api.umd.js',
            'jquery': 'npm:jquery/',
            'lodash': 'npm:lodash/lodash.js',
            'moment': 'npm:moment/',

             // the line that changed:
            'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js', 
            'ng2-slim-loading-bar': 'npm:ng2-slim-loading-bar',
            'symbol-observable': 'npm:symbol-observable'
        },

edited Jan 17, 2018 at 22:12

Chris Halcrow

32.5k19 gold badges202 silver badges235 bronze badges

answered Jan 30, 2017 at 7:06

Muhammad Bilal

1,17213 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Bilal Over a year ago

'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js', // this line changed

Collectives™ on Stack Overflow

Error on angular2 : (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related