Angular2 with Typescript - Errore di caricamento di angular2/platform/browser

Ho trascorso troppo tempo su questo, ma sono bloccato e non riesco a capire come eseguire Angular2 con Typescript. Continuo a ricevere un 404 per i componenti:Angular2 with Typescript - Errore di caricamento di angular2/platform/browser

Errore durante il caricamento http://localhost:5000/angular2/platform/browser come "angular2/platform/navigatore" dal http://localhost:5000/appScripts/boot.js

Ecco la mia struttura di cartelle:

mio index.html è:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Angular 2 with ASP.NET Core</title> 
<!-- 1. Load libraries --> 
<script src="libs/es6-shim/es6-shim.min.js"></script> 
<script src="libs/zone.js/dist/zone.js"></script> 
<script src="libs/reflect-metadata/Reflect.js"></script> 
<script src="libs/systemjs/dist/system.src.js"></script> 


<!-- 2. Configure SystemJS --> 
<script src="./appScripts/config.js"></script> 
<script> 

    System.import('appScripts/boot') 
      .then(null, console.error.bind(console)); 
</script> 

</head> 
<body> 
<my-app>Loading...</my-app> 
</body> 
</html>

I boot.ts:

/// <reference path="../node_modules/angular2/typings/browser.d.ts" /> 
    import {bootstrap} from 'angular2/platform/browser' 
    import {AppComponent} from './app' 
    bootstrap(AppComponent);

I app.ts:

/// <reference path="../typings/jquery/jquery.d.ts" /> 
    /// <reference path="../typings/angularjs/angular-route.d.ts" /> 
    /// <reference path="../typings/angularjs/angular.d.ts" /> 

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

I config.js

(function (global) { 

    // map tells the System loader where to look for things 
    var map = { 
     'app': 'appScripts', // 'dist', 
     'rxjs': 'libs/rxjs', 
     'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api', 
     '@angular': 'libs/@angular' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app': { main: 'boot.js', defaultExtension: 'js' }, 
     'rxjs': { defaultExtension: 'js' }, 
     'angular2-in-memory-web-api': { defaultExtension: 'js' }, 
    }; 

    var packageNames = [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     '@angular/router-deprecated', 
     '@angular/testing', 
     '@angular/upgrade', 
    ]; 

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    packageNames.forEach(function (pkgName) { 
     packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

    var config = { 
     map: map, 
     packages: packages 
    } 

    // filterSystemConfig - index.html's chance to modify config before we register it. 
    if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

    System.config(config); 

})(this);

Qui è più della struttura delle cartelle per dare una migliore idea della struttura del progetto.

Ecco il mio package.json

{ 
    "version": "1.0.0", 
    "name": "ASP.NET", 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "2.0.0-rc.1", 
    "@angular/http": "2.0.0-rc.1", 
    "@angular/platform-browser": "2.0.0-rc.1", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.1", 
    "@angular/router": "2.0.0-rc.1", 
    "@angular/router-deprecated": "2.0.0-rc.1", 
    "@angular/upgrade": "2.0.0-rc.1", 
    "systemjs": "0.19.27", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12", 
    "angular2-in-memory-web-api": "0.0.7" 
    }, 
    "devDependencies": { 
    "gulp": "^3.9.0", 
    "gulp-autoprefixer": "~3.1.0", 
    "gulp-concat": "~2.6.0", 
    "gulp-imagemin": "~2.4.0", 
    "imagemin-pngquant": "~4.2.0", 
    "jshint": "2.9.2", 
    "gulp-jshint": "2.0.0", 
    "jshint-stylish": "~2.1.0", 
    "rimraf": "~2.5.1", 
    "gulp-minify-css": "~1.2.4", 
    "gulp-sass": "2.2.0", 
    "gulp-uglify": "~1.5.1", 
    "gulp-sourcemaps": "~1.6.0", 
    "gulp-plumber": "1.1.0", 
    "gulp-notify": "2.2.0", 
    "beepbeep": "1.2.0", 
    "gulp-rename": "1.2.2", 
    "gulp-sourcemap": "1.0.1", 
    "gulp-clean-css": "2.0.6", 
    "main-bower-files": "2.13.0", 
    "gulp-filter": "4.0.0", 
    "typescript": "^1.8.10", 
    "gulp-typescript": "^2.13.1", 
    "live-server": "1.0.0", 
    "typings": "^1.0.4", 
    "gulp-tsc": "^1.1.5" 
    } 
}

vi ringrazio in anticipo per il vostro aiuto e per favore fatemi sapere se posso fornire qualche dettaglio in più.

fonte

2016-06-01 Matt Knight

Si sta utilizzando la versione rc.1 di angular ma si sta tentando di importare la versione beta.

è necessario utilizzare @angular/.. come questo:

import { bootstrap } from '@angular/platform-browser-dynamic'; 

import { Component } from '@angular/core'; // instead of 'angular2/core' 
....

Per maggiori dettagli vedi anche changelog https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02

To import various symbols please adjust the paths in the following way:

angular2/core -> @angular/core 
angular2/compiler -> @angular/compiler 
angular2/common -> @angular/common 
angular2/platform/browser -> @angular/platform-browser + @angular/platform-browser-dynamic 
angular2/platform/server -> @angular/platform-server 
angular2/testing -> @angular/core/testing 
angular2/upgrade -> @angular/upgrade 
angular2/http -> @angular/http 
angular2/router -> @angular/router-deprecated (from beta.17 for backwards compatibility) 
new package: @angular/router - component router with several breaking changes

fonte

2016-06-01 19:55:00 yurzui

Grazie Yurzui .... Vuoi dire entro boot.ts, dovrei cambia questa riga 'importa {bootstrap} da 'angular2/platform/browser'' a questo' import {bootstrap} da' @ angular/platform-browser-dynamic'' –

@Matt Knight Sì esattamente – yurzui

Posso confondere RC1 con beta. Non ci avevo pensato. Tuttavia, questo cambiamento da solo non lo fa abbastanza. Ricevo ancora: ** http: // localhost: 6722/angular2/core Impossibile caricare la risorsa: il server ha risposto con uno stato di 404 (non trovato) zone.js: 323 Errore: errore: errore XHR (404 non trovato) caricamento http: // localhost: 6722/angular2/core (...) ** Grazie ancora per il vostro aiuto. –

Angular2 with Typescript - Errore di caricamento di angular2/platform/browser

risposta

Problemi correlati