Angular2 mit Typescript - Fehler beim Laden von angular2/platform/browser

Ich habe viel zu viel Zeit damit verbracht, aber ich bin stecken geblieben und kann nicht herausfinden, wie man Angular2 mit Typescript zum Laufen bringt. Ich halte eine 404 für die Komponenten erhalten:Angular2 mit Typescript - Fehler beim Laden von angular2/platform/browser

Fehler beim Laden des http://localhost:5000/angular2/platform/browser als "angular2/Plattform/Browser" von http://localhost:5000/appScripts/boot.js

Hier ist meine Ordnerstruktur:

Meine index.html ist:

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

Die boot.ts:

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

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

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

ist hier mehr von der Ordnerstruktur Ihnen eine bessere Vorstellung von der Projektstruktur zu geben.

Hier ist meine 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" 
    } 
}

Sie für Ihre Hilfe Vielen Dank im Voraus und lassen Sie es mich wissen, wenn ich einige weitere Details zur Verfügung stellen kann.

Quelle

2016-06-01 Matt Knight

Sie verwenden rc.1 Version von eckig aber versuchen, Beta-Version zu importieren.

Sie benötigen @angular/.. wie folgt zu verwenden:

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

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

Weitere Informationen auch 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

Quelle

2016-06-01 19:55:00 yurzui

Dank Yurzui Changelog sehen .... Sie innerhalb boot.ts meine, ich sollte Ändere diese Zeile 'import {bootstrap} von 'angular2/platform/browser'' zu diesem' import {bootstrap} von' @ angular/plattform-browser-dynamic'' –

@Matt Knight Ja genau – yurzui

Ich könnte RC1 mit Beta zusammenfassen. Daran hatte ich nicht gedacht. Diese Änderung allein macht es jedoch nicht ganz. Ich bekomme immer noch: ** http: // localhost: 6722/angular2/core Fehler beim Laden der Ressource: Der Server reagierte mit dem Status 404 (Not Found) zone.js: 323 Fehler: Fehler: XHR-Fehler (404 Not Found) laden http: // localhost: 6722/angular2/core (...) ** Vielen Dank noch einmal für Ihre Hilfe. –

Angular2 mit Typescript - Fehler beim Laden von angular2/platform/browser

Antwort

Verwandte Themen