Angular2 Rc4 bis Rc5 Migration: Laden der Website nicht möglich (Traceur/Formulare)

Question

Ich habe meine ng2-App heute von RC4 auf RC5 mit this aktualisiert und werde später von RC5 auf C7 aktualisieren. Ich erhalte ärgerlichen Fehler

http://localhost:5001/ember-cli-live-reload.js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:5001/traceur Failed to load resource: the server responded with a status of 404 (Not Found) zone.js:344 Unhandled Promise rejection: (SystemJS) XHR error (404 Not Found) loading http://localhost:5001/traceur Error: XHR error (404 Not Found) loading http://localhost:5001/traceur at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:5001/vendor/zone.js/dist/zone.js:636:29) at ZoneDelegate.invokeTask (http://localhost:5001/vendor/zone.js/dist/zone.js:225:37) at Zone.runTask (http://localhost:5001/vendor/zone.js/dist/zone.js:125:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:5001/vendor/zone.js/dist/zone.js:293:33) Error loading http://localhost:5001/traceur Unable to load transpiler to transpile http://localhost:5001/vendor/@angular/forms/index.js Error loading http://localhost:5001/vendor/@angular/forms/index.js as "@angular/forms" from http://localhost:5001/app/app.module.js ; Zone: ; Task: Promise.then ; Value: Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:5001/traceur (…) (SystemJS) XHR error (404 Not Found) loading http://localhost:5001/traceur Error: XHR error (404 Not Found) loading http://localhost:5001/traceur at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:5001/vendor/zone.js/dist/zone.js:636:29) at ZoneDelegate.invokeTask (http://localhost:5001/vendor/zone.js/dist/zone.js:225:37) at Zone.runTask (http://localhost:5001/vendor/zone.js/dist/zone.js:125:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:5001/vendor/zone.js/dist/zone.js:293:33) Error loading http://localhost:5001/traceur Unable to load transpiler to transpile http://localhost:5001/vendor/@angular/forms/index.js Error loading http://localhost:5001/vendor/@angular/forms/index.js as "@angular/forms" from http://localhost:5001/app/app.module.jsconsoleError @ zone.js:344 zone.js:346 Error: Uncaught (in promise): Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:5001/traceur (…)consoleError @ zone.js:346

die Täter Linien

Unable to load transpiler to transpile http://localhost:5001/vendor/@angular/forms/index.js

Error loading http://localhost:5001/vendor/@angular/forms/index.js as "@angular/forms" from http://localhost:5001/app/app.module.js

app.module.ts sind

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { routing } from './app.routes'; 

import { AppComponent } from './app.component'; 
import { FactoryFormComponent } from "./factory/factory-form.component"; 
import { SupplierFormComponent } from "./supplier/supplier-form.component"; 
import { BusinessAreaFormComponent } from './business-area/business-area-form.component'; 
import { HomeComponent } from "./home/home.component"; 

import { FactoryService } from "./factory/factory.service"; 
import { SupplierService } from "./supplier/supplier.service"; 
import { AppService } from "./shared/app.service"; 
import { UtilityService } from "./shared/utility.service"; 
import { HomeService } from "./home/home.service"; 
import { BusinessAreaService } from './business-area/business-area.service'; 


@NgModule({ 
    imports: [BrowserModule, routing, FormsModule, HttpModule], 
    declarations: [AppComponent, HomeComponent, FactoryFormComponent, SupplierFormComponent, BusinessAreaFormComponent], 
    bootstrap: [AppComponent], 
    providers: [AppService, UtilityService, FactoryService, SupplierService, HomeService, BusinessAreaService] 
}) 
export class AppModule { } 

packages.json

{ 
    "name": "xxxx", 
    "version": "0.0.0", 
    "license": "xxxx", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng serve", 
    "postinstall": "typings install", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.5", 
    "@angular/compiler": "2.0.0-rc.5", 
    "@angular/core": "2.0.0-rc.5", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0-rc.5", 
    "@angular/platform-browser": "2.0.0-rc.5", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.5", 
    "@angular/router": "3.0.0-rc.1", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.5", 
    "angular2-in-memory-web-api": "0.0.20", 
    "systemjs": "0.19.38", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "^0.6.12", 
    "bootstrap": "^3.3.6", 
    "es6-shim": "0.35.1", 
    "ng2-bootstrap": "^1.0.17" 
    }, 
    "devDependencies": { 
    "angular-cli": "1.0.0-beta.6", 
    "codelyzer": "0.0.20", 
    "cucumber": "^1.2.1", 
    "ember-cli-inject-live-reload": "1.4.0", 
    "jasmine-core": "2.4.1", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "0.13.22", 
    "karma-chrome-launcher": "0.2.3", 
    "karma-jasmine": "0.3.8", 
    "protractor": "3.3.0", 
    "protractor-cucumber-framework": "^0.6.0", 
    "ts-node": "0.5.5", 
    "tslint": "3.11.0", 
    "typescript": "^1.8.10", 
    "typings": "^1.0.5" 
    } 
} 

system config.ts

// SystemJS configuration file, see links for more information 
// https://github.com/systemjs/systemjs 
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md 

/*********************************************************************************************** 
* User Configuration. 
**********************************************************************************************/ 
/** Map relative paths to URLs. */ 
const map: any = { 
}; 

/** User packages configuration. */ 
const packages: any = { 
}; 

//////////////////////////////////////////////////////////////////////////////////////////////// 
/*********************************************************************************************** 
* Everything underneath this line is managed by the CLI. 
**********************************************************************************************/ 
const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/forms', 

    // Thirdparty barrels. 
    'rxjs', 
    'ng2-bootstrap', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    'app/factory', 
    'app/data', 
    'app/supplier', 
    'app/home', 
    'app/business-area', 
    'app/contact', 
    'app/relationship', 
    /** @cli-barrel */ 
]; 

const cliSystemConfigPackages: any = {}; 
barrels.forEach((barrelName: string) => { 
    cliSystemConfigPackages[barrelName] = { main: 'index' }; 
}); 

/** Type declaration for ambient System. */ 
declare var System: any; 

// Apply the CLI SystemJS configuration. 
System.config({ 
    map: { 
     '@angular': 'vendor/@angular', 
     'rxjs': 'vendor/rxjs', 
     'main': 'main.js', 
     'moment': 'vendor/moment/moment.js', 
     'ng2-bootstrap': 'vendor/ng2-bootstrap/ng2-bootstrap.js' 
    }, 
    packages: cliSystemConfigPackages 
}); 

// Apply the user's configuration. 
System.config({ map, packages }); 

Winkel-cli-build.js

// Angular-CLI build configuration 
// This file lists all the node_modules files that will be used in a build 
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs 

/* global require, module */ 

var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 

module.exports = function (defaults) { 
    return new Angular2App(defaults, { 
     vendorNpmFiles: [ 
      'systemjs/dist/system-polyfills.js', 
      'systemjs/dist/system.src.js', 
      'zone.js/dist/**/*.+(js|js.map)', 
      'es6-shim/es6-shim.js', 
      'reflect-metadata/**/*.+(ts|js|js.map)', 
      'rxjs/**/*.+(js|js.map)', 
      '@angular/**/*.+(js|js.map)', 
      'ng2-bootstrap/**/*.js', 
      'moment/moment.js', 
      'bootstrap/dist/**/*' 
     ] 
    }); 
}; 

Ich kann meinen Kopf nicht scheinen um das zu bekommen, warum es nicht in der Lage ist zu laden Formen. Es hat mit RC4 mit Sicherheit gearbeitet ... jeder Vorschlag ist willkommen.

Answer 1

Um zu RC05 von RC04 zu migrieren Ich glaube, Sie ältere Version des Formularmoduls

"@angular/forms": "version 0.3.0" 

Ich würde vorschlagen, direkt an Angular2 Version 2.0.0 zu aktualisieren, verwenden müssen, um zu versuchen.

Answer 2

Angular-Team hat ihre Richtlinien bezüglich ES-Version in ihren Paketen geändert. In der Vergangenheit hattest du ES5-Skripte und alles hat funktioniert. Derzeit werden die Dateien in Paketen in ES6 geschrieben. SystemJS findet import {something} from 'somewhere'; im Inneren und versucht, Skript nach ES5 zu transponieren (Dies ist der Zweck von Traceur).

Lösung: Ändern Sie die SystemJS-Konfiguration oder das Setup-Traceur, um Skripts im Clientbrowser zu transponieren.

Ich ziehe es die erste Methode, weil es schneller und einfacher aufzusetzen ist:

System-config.ts:

... 
const packages: any = { 
    'rxjs' : {main: 'Rx'}, 
    '@angular/core' : {main: 'bundles/core.umd.js'}, 
    '@angular/common' : {main: 'bundles/common.umd.js'}, 
    '@angular/upgrade' : {main: 'bundles/upgrade.umd.js'}, 
    '@angular/compiler' : {main: 'bundles/compiler.umd.js'}, 
    '@angular/forms' : {main: 'bundles/forms.umd.js'}, 
    '@angular/router' : {main: 'bundles/router.umd.js'}, 
    '@angular/platform-browser' : {main: 'bundles/platform-browser.umd.js'}, 
    '@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'}, 
    '@angular/http' : {main: 'bundles/http.umd.min.js'}, 
... 

Der Nachteil dieser Strategie ist, dass Sie ganzes Paket innerhalb einer Datei . Dies kann das Debugging erschweren.

Bitte beachten Sie auch, dass Sie NICHT auf APIs zugreifen dürfen, die von eckigen Teams als privat gekennzeichnet sind. Dies ist auch die jüngste Änderung.

Mehr hier, um herauszufinden: https://github.com/angular/angular/blob/master/CHANGELOG.md