Angular-cli: traceur 404 (Not Found)

Created on 11 Sep 2016  Â·  9Comments  Â·  Source: angular/angular-cli

Please provide us with the following information:

  1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Linux Mint 17 Qiana

  1. Versions. Please run ng --version. If there's nothing outputted, please run
    in a Terminal: node --version and paste the result here:

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.10
node: 4.5.0
os: linux ia32

  1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
    do on your code? etc.

yes, I tried to upgrade to RC6 updating the file package.json:

{
  "name": "instangular",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng server",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/platform-server": "^2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.6",
    "@ngrx/core": "^1.1.0",
    "@ngrx/effects": "^2.0.0-beta.3",
    "@ngrx/store": "^2.1.2",
    "angular-cli": "^1.0.0-beta.10",
    "angular-cli-github-pages": "^0.2.0",
    "angular2-fontawesome": "^0.5.0",
    "angular2-jwt": "^0.1.18",
    "bootstrap-sass": "^3.3.6",
    "bootstrap-social": "5.0.0",
    "bootswatch-sass": "^3.2.0",
    "codelyzer": "0.0.19",
    "ember-cli-inject-live-reload": "^1.4.0",
    "es6-shim": "^0.35.0",
    "font-awesome": "^4.6.3",
    "jasmine-core": "^2.4.1",
    "jasmine-spec-reporter": "^2.4.0",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "lodash": "^4.13.1",
    "moment": "^2.13.0",
    "ng2-bootstrap": "^1.0.17",
    "ng2-translate": "^2.4.3",
    "node-sass": "^3.7.0",
    "protractor": "^3.3.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "ts-node": "^0.5.5",
    "tslint": "^3.6.0",
    "typescript": "^2.0.2",
    "typings": "^1.3.1",
    "zone.js": "^0.6.17"
  }
}

system-config:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap',
  'ng2-translate': 'vendor/ng2-translate',
  'angular2-fontawesome': 'vendor/angular2-fontawesome',
  '@ngrx': 'vendor/@ngrx'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': { defaultExtension: 'js' },
  'ng2-translate': { defaultExtension: 'js' },
  'angular2-fontawesome': { defaultExtension: 'js' },
  '@ngrx/core': {
    main: 'index.js',
    format: 'cjs'
   },
   '@ngrx/store': {
      main: 'index.js',
      format: 'cjs'
    },
   '@ngrx/effects': {
     main: 'index.js',
     format: 'cjs'
   }
};
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/forms',
  // Thirdparty barrels.
  'rxjs',
  'zone.js',
  // App specific barrels.
  'app/',
  'app/components/',
  'app/components/+home/',
  'app/components/header',
  'app/components/shared',
  'app/accounts/',
  'app/accounts/+login/',
  'app/accounts/+signup/'

  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });
  1. The log given by the failure. Normally this include a stack trace and some
    more information.
zone.js:101 GET http://localhost:4200/traceur 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:345Zone.scheduleMacroTask @ zone.js:282(anonymous function) @ zone.js:122send @ VM272:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:607(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
zone.js:484 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/traceur
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:794:30)
        at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:365:38)
        at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:265:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:433:34)
    Error loading http://localhost:4200/traceur
    Error loading http://localhost:4200/vendor/@angular/router/index.js as "@angular/router" from http://localhost:4200/app/app.routing.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/traceur(…) nullconsoleError @ zone.js:484_loop_1 @ zone.js:511drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437
zone.js:486 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/traceur(…)
  1. Mention any other details that might be useful.
    > ---------------------------------------------------------------
    > Thanks! We'll be in touch soon.

Most helpful comment

Problem being fixed with a new system-config.js like that.

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'app': 'src/app',
  'main': 'main.js',

  '@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
  '@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
  '@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
  '@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js'
};

/** User packages configuration. */
const packages: any = {
  'app': {main: 'main', defaultExtension: 'js'},
  'rxjs': {main: 'Rx.js', defaultExtension: 'js'}
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared'
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = {main: 'index'};
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({map, packages});

All 9 comments

I have the same issue, is there an answer?

I have the same issue.

I found that my problem was somthinf

II found my problem to be that my system.config.js wasn't like the ng team suggested file.
I found it by removing the catch statment on the system.config.js/ index.html bubbled to the console the exact problem

@lilling Could you paste an example of your fix please ?

Problem being fixed with a new system-config.js like that.

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'app': 'src/app',
  'main': 'main.js',

  '@angular/core': 'vendor/@angular/core/bundles/core.umd.js',
  '@angular/common': 'vendor/@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'vendor/@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'vendor/@angular/http/bundles/http.umd.js',
  '@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
  '@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js'
};

/** User packages configuration. */
const packages: any = {
  'app': {main: 'main', defaultExtension: 'js'},
  'rxjs': {main: 'Rx.js', defaultExtension: 'js'}
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared'
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = {main: 'index'};
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({map, packages});

thanks to all, but also i have problems with @ngrx/store and @ngrx/core.

I added these lines but does not work

'@ngrx/core': 'vendor/@ngrx/core/bundles/core.min.umd.js',
  '@ngrx/store': 'vendor/@ngrx/store/bundles/store.min.umd.js',
  '@ngrx/effects': 'vendor/@ngrx/effects',

We've since moved to a webpack based build system and no longer support the SystemJS based one. You can find upgrading instructions here: https://github.com/angular/angular-cli#webpack-update

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rwillmer picture rwillmer  Â·  3Comments

MateenKadwaikar picture MateenKadwaikar  Â·  3Comments

gotschmarcel picture gotschmarcel  Â·  3Comments

IngvarKofoed picture IngvarKofoed  Â·  3Comments

donaldallen picture donaldallen  Â·  3Comments