Cross origin requests are only supported for protocol schemes issue in Angular2

Question

I'm trying to complete the Angular Quickstart tutorial but I'm getting the CORS error.

I configured this host in windows on host file under system32/drivers/etc/:

127.0.0.1       tour-of-heroes

I configured this virtual host in apache

<VirtualHost *:80>
    DocumentRoot "xxxxxxxxxxx/tour-of-heroes"
    ServerName tour-of-heroes
    <Directory />
        DirectoryIndex index.html
        AllowOverride All
        Order Deny,Allow
        Deny from all
        Allow from 127.0.0.1
    </Directory>
</VirtualHost>

This is the error:

system.src.js:1049 XMLHttpRequest cannot load npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ zone.js:115zoneBoundFn @ zone.js:88
(index):16 Error: XHR error loading npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js(…)(anonymous function) @ (index):16run @ zone.js:115zoneBoundFn @ zone.js:88run @ zone.js:115zoneBoundFn @ zone.js:88
system.src.js:1049 XMLHttpRequest cannot load npm:@angular/core/bundles/core.umd.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ zone.js:115zoneBoundFn @ zone.js:88
system.src.js:1049 XMLHttpRequest cannot load npm:@angular/platform-browser/bundles/platform-browser.umd.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ zone.js:115zoneBoundFn @ zone.js:88
system.src.js:291 Assertion failed: loading or loaded

This is what i have tried with no results:

Allow Control Allow Origin Google Chrome browser extension.
Header module in apache.

I'm using WAMP on Windows. I'm not following the quickstart tutorial to the letter because I'm using Grunt for the typescript compiling and that forced me to do things a little bit different.

This is my 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: 'js/tour-of-heroes2',
      // 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);

This is my package.json:

{
  "name": "AngularJS2",
  "version": "1.0.0",
  "author": "author",
  "description": "Project Tour of Heroes",
  "scripts": {
    "postinstall": "typings install"
  },
  "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",

    "core-js": "^2.4.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.6",
    "zone.js": "0.5.10",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-concurrent": "^2.0.3",
    "grunt-contrib-copy": "^0.8.1",
    "grunt-contrib-jshint": "^0.11.3",
    "grunt-ts": "^5.5.0-beta.2",
    "load-grunt-config": "^0.17.2",
    "jshint-stylish": "^2.0.1",
    "time-grunt": "^1.2.1",
    "typings":"^1.4.0"
  }
}

This is my index.html:

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="styles.css">-->
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

This is my grunt ts compiler file:

module.exports = {
    base: {
        src: ['src/**/*.ts'],
        dest: 'js/tour-of-heroes/',
        options: {
            module: 'system', //or commonjs
            moduleResolution: 'node',
            target: 'es2015', //or es3 
            sourceMap: true,
            declaration: true,
            emitDecoratorMetadata: true,
            experimentalDecorators: true,
            removeComments: false,
            noImplicitAny: false
        }
    }
};

my main.ts:

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

my app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

my app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

And this is my file structure:

Any help would be great, I'm desperate.

Thank you in advance.

0xcaff 0xcaff · Accepted Answer · 2016-11-12T22:23:16

systemjs only supports the paths property in versions newer than 0.19.30. Update your systemjs package or stop using the paths property as mentioned in Michael Desigaud's answer.

Cross origin requests are only supported for protocol schemes issue in Angular2

2 Answers