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:

      <!---->          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:

Cualquier ayuda seria genial, estoy desesperado.

Gracias de antemano.

 (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);