Las solicitudes de origen cruzado solo se admiten para problemas de esquemas de protocolo en Angular2

Estoy intentando completar el tutorial de inicio rápido angular, pero obtengo el error CORS.

Configuré este host en Windows en el archivo host bajo system32 / drivers / etc /:

127.0.0.1 tour-of-heroes 

Configuré este host virtual en apache

  DocumentRoot "xxxxxxxxxxx/tour-of-heroes" ServerName tour-of-heroes  DirectoryIndex index.html AllowOverride All Order Deny,Allow Deny from all Allow from 127.0.0.1   

Este es el 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 

Esto es lo que he intentado sin resultados:

  • Permitir control Permitir origen de la extensión del navegador Google Chrome
  • Módulo de cabecera en apache.

Estoy usando WAMP en Windows. No estoy siguiendo el tutorial de inicio rápido de la letra porque estoy usando Grunt para la comstackción de manuscritos y eso me obligó a hacer las cosas un poco diferentes.

Este es mi 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); 

Este es mi 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" } } 

Este es mi index.html:

   Angular QuickStart   <!---->          System.import('app').catch(function(err){ console.error(err); });     Loading...   

Este es mi archivo de comstackción de grunt ts:

 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 } } }; 

mis principales:

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); 

mi 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 { } 

mi app.component.ts:

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '

My First Angular App

' }) export class AppComponent { }

Y esta es mi estructura de archivos:

introduzca la descripción de la imagen aquí

Cualquier ayuda seria genial, estoy desesperado.

Gracias de antemano.

systemjs solo admite la propiedad de paths en versiones más nuevas que 0.19.30 . Actualice su paquete systemjs o deje de usar la propiedad de paths como se menciona en la respuesta de Michael Desigaud.

Puedes intentar esto: reemplaza @npm: por node_modules/ en el archivo systemjs.config.js (funciona para mí):

 (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': 'node_modules/angular/core/bundles/core.umd.js', '@angular/common': 'node_modules/angular/common/bundles/common.umd.js', '@angular/compiler': 'node_modules/angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js', '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js', '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'node_modules/rxjs', //'angular-in-memory-web-api': 'node_modules/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);