Angular2 upgrade to RC6, traceur not found

Question

After upgrade to RC6, following errors occurs:

zone.js:101 GET http://localhost/traceur 404 (Not Found)
zone.js:484 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost/traceur
            at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost/vendor/zone.js/dist/zone.js:794:30)
            at ZoneDelegate.invokeTask (http://localhost/vendor/zone.js/dist/zone.js:365:38)
            at Zone.runTask (http://localhost/vendor/zone.js/dist/zone.js:265:48)
            at XMLHttpRequest.ZoneTask.invoke (http://localhost/vendor/zone.js/dist/zone.js:433:34)
        Error loading http://localhost/traceur
        Error loading http://localhost/vendor/@angular/platform-browser-dynamic/index.js as "@angular/platform-browser-dynamic" from http://localhost/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost/traceur(…) null
zone.js:486 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost/traceur(…)
system.src.js:371 Assertion failed: loading or loaded

I understand that without code there is not easy to solve problem, but maybe someone have same error and figured it out.

Existing posts not solving my problem

UPDATE: system.config.js:

// 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 = {
  "ng2-charts": "vendor/ng2-charts",
  'ng2-bs3-modal': 'vendor/ng2-bs3-modal',
  'angular2-moment': 'vendor/angular2-moment',
  "assets": "assets",
};

/** User packages configuration. */
const packages: any = {
  "ng2-charts": {main: 'ng2-charts.js'},
  "ng2-bs3-modal": {main: 'ng2-bs3-modal.js'},
  "angular2-moment": {main: 'index.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',
  'app/shared/navbar',
  'app/shared/sidebar',
  'app/shared/footer',
  'app/dashboard',
  'app/docs',
  /** @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 });

UPDATE 2: I changed system.config.js to following:

// 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 = {
  "ng2-charts": "vendor/ng2-charts",
  'ng2-bs3-modal': 'vendor/ng2-bs3-modal',
  'angular2-moment': 'vendor/angular2-moment',
  "assets": "assets",
};

/** User packages configuration. */
const packages: any = {
  "ng2-charts": {main: 'ng2-charts.js'},
  "ng2-bs3-modal": {main: 'ng2-bs3-modal.js'},
  "angular2-moment": {main: 'index.js'}
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // App specific barrels.
  'app',
  'app/shared',
  'app/shared/navbar',
  'app/shared/sidebar',
  'app/shared/footer',
  'app/dashboard',
  'app/docs',
  /** @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: {
    'main': 'main.js',
  },
  packages: cliSystemConfigPackages
});

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

System.config({
  //use typescript for simple compilation (no typechecking)
  //transpiler: 'typescript',
  //typescript compiler options
  //typescriptOptions: {
  //emitDecoratorMetadata: true
  //},
  paths: {
    'npm:': 'vendor/'
  },
  map: {
    'app': './src',

    '@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/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.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/router': 'npm:@angular/router/bundles/router.umd.js',


    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',

    'rxjs': 'npm:rxjs'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

Now I getting following errors:

zone.js:101 GET http://localhost/vendor/@angular/common/bundles/common.umd.js/src/directives/core_directives 404 (Not Found)

Answer 1

i'm not sure if you have this resolved. but, i ran across a fix that worked for me. actually it's a bit less of a fix as it is a workaround.

https://github.com/angular/angular/issues/10881

apparently there is some dumb multi-line comments issue with Angular parsing the NgModule file. When migrating i copied my old main.ts inside of a /* */ for reference. took these lines out and ran perfectly.

Answer 2

Good afternoon, I had the same issue all day. After consulting several different links, I finally got it up and working by changing my system.config.ts to the following:

"use strict";
// 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 = {
    "@angular": "vendor/@angular",
    "rxjs": "vendor/rxjs",
    "typescript": "node_modules/typescript/lib/typescript.js",
    "materialize": "vendor/materialize-css",
    "angular2-materialize": "vendor/angular2-materialize",
    "jquery": "vendor/jquery"
};
/** User packages configuration. */
const packages: any = {
    "materialize": {
        "format": "global",
        "main": "dist/js/materialize",
        "defaultExtension": "js"
    },
    "angular2-materialize": {
        "main": "dist/index",
        "defaultExtension": "js"
    },
    "@angular/core": {
        main: "bundles/core.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/common": {
        main: "bundles/common.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/compiler": {
        main: "bundles/compiler.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/forms": {
        main: "bundles/forms.umd.js"
    },
    "@angular/http": {
        main: "bundles/http.umd.js"
    },
    "@angular/platform-browser": {
        main: "bundles/platform-browser.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/platform-browser-dynamic": {
        main: "bundles/platform-browser-dynamic.umd.js" //use the ESM entry point for bundling tools
    },
    "@angular/router": {
        main: "bundles/router.umd.js" //use the ESM entry point for bundling tools
    },
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * 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"
    /** @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",
        "jquery": "node-modules/jquery",
        "materialize-css": "node-modules/materialize-css",
        "angular2-materialize": "node_modules/angular2-materialize",
        "main": "main.js"
    },
    packages: cliSystemConfigPackages
});
// Apply the user"s configuration.
System.config({ map, packages });

Answer 3

Victorio,

Thanks for sharing your working systems.config. I used it to compare with mine and I just needed to remove the following line and got it fixed:

// No umd for router yet
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

This line comes with the Angular Quick Start RC5 tutorial.

Again,

Thanks very much for sharing. I was struggling with it for a day. :-)

Cheers!

Answer 4

An easy way to see the applied changes can be found in this link: https://reviews.angular.io/R4:4f2bc6690486610c5736ce67ead984ba7ff1ce8d