10

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)
ulou
  • 5,542
  • 5
  • 37
  • 47
  • Have you tried to update system.js.config https://gist.github.com/robwormald/29f3dcda1a06b955d83fccb2a94586eb? – yurzui Sep 02 '16 at 14:18
  • No, I will try. Current system.config.js in post – ulou Sep 02 '16 at 14:26
  • 2
    I'm having exactly the same issue. – Luke Baughan Sep 02 '16 at 14:45
  • @yurzui I changed my system.config.js, Post Edited – ulou Sep 02 '16 at 15:07
  • So I went through the process described in the link and it seemed to almost work but then I ran into a problem with traceur and typescript. I think theres an issue with the way things are now being loaded using es6 modules. I tried to plug in typescript directly into the vendor bits but then hit an error with "ts" so Im not entirely sure what to do now. With regard to your update I think you need the code underneath where it says "If you're using SystemJS-builder " bit not the code you updated to from the top of the article. – Luke Baughan Sep 02 '16 at 16:32
  • 3
    I have the same problem – Luiz Bicalho Sep 02 '16 at 18:27

4 Answers4

10

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 });
Victorio Ferrario
  • 116
  • 1
  • 3
  • Did you need to make any changes to angular-cli build files? I'm going to try this out over the weekend so would be great to know if any other files need changing! – Luke Baughan Sep 02 '16 at 19:58
  • No, I did not. The only thing I had to do was changing the system-config.ts. I tried several different things, but rolled them all back, until finally coming up with this configuration. – Victorio Ferrario Sep 02 '16 at 20:00
  • Im having a go at implementing your solution now - I too spent about four hours on the problem but just couldn't get it quite right - though I was led astray by the traceur error messages! – Luke Baughan Sep 02 '16 at 20:32
  • Yes, the traceur error message was my original error. i tried loading the npm for that. I tried several other options, like using AOT compilation, but at the end of the day, changing my system-config.ts to this was the final solution. The only thing other then that was i had to put a hard reference to in my index.html. I am using Materialize-CSS. – Victorio Ferrario Sep 02 '16 at 20:42
  • You sir, are a scholar and a gentleman. I'm struggling with a few issues regarding ng2-bootstrap but your changes worked like a charm for getting things back on track - thank you very much! If you're ever in Rugby, England I'll buy you a pint. – Luke Baughan Sep 02 '16 at 20:57
  • Just out of curiosity how did you discover the "bundles/" part of the packages path (that was the reason my solution didn't work) – Luke Baughan Sep 02 '16 at 21:40
  • 1
    It was a bit of trial and error. Mainly using the link given previously, which is also referenced in the release notes. Although nowhere could I find any examples with angular cli, so I really just took a moment to figure out what is really happening. But, short answer, dumb luck! Cheers! – Victorio Ferrario Sep 02 '16 at 22:19
  • I was getting the same errors as the dude asking this question. What solved it for me was adding all the `@angular/...` to the `const packages: any` variable. Many Kudos! Saved me a whole lot of time! – Logan H Sep 16 '16 at 15:14
1

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

subarroca
  • 851
  • 7
  • 22
0

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!

Marrone
  • 487
  • 2
  • 7
  • 18
0

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.

SweeneyRobb
  • 80
  • 1
  • 5