SystemJS-Fehler beim Kompilieren im Voraus (kein Provider für NgZone)

Question

Ich habe Angulars Vor-Kompilierung zuvor erfolgreich verwendet. Jetzt habe ich Routing und Lazy Loading zu meiner App hinzugefügt, und ich kann das nicht mehr zum Laufen bringen.

Ich habe meinen Code aktualisiert, um die (neueste) Version 2.0 zu verwenden, und es läuft gut, wenn ich Just-in-Time kompiliere. Aber beim Kompilieren Voraus-Zeit, die ich die folgende Fehlermeldung erhalten:

(index):52 Error: (SystemJS) XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js Error: XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29) at ZoneDelegate.invokeTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:236:37) at Zone.runTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47) at XMLHttpRequest.ZoneTask.invoke (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33) Error loading https://127.0.0.1:3443/traceur.js Error loading https://127.0.0.1:3443/node_modules/@angular/core/src/linker/ng_module_factory.js as "@angular/core/src/linker/ng_module_factory" from https://127.0.0.1:3443/dist/app/app.module.ngfactory.js

bei app.module.ngfactory.js Sehen, gibt es eine Reihe von Importen ähnlich die folgenden:

... 
var import0 = require('@angular/core/src/linker/ng_module_factory'); 
var import1 = require('./app.module'); 
var import2 = require('@angular/common/src/common_module'); 
var import3 = require('@angular/core/src/application_module'); 
var import4 = require('@angular/platform-browser/src/browser'); 
var import5 = require('@angular/forms/src/directives'); 
var import6 = require('@angular/forms/src/form_providers'); 
... 

I haben soeben bemerkt, dass, wenn ich ändern

var import0 = require('@angular/core/src/linker/ng_module_factory'); 

zu

import * as import0 from '@angular/core/src/linker/ng_module_factory'; 

SystemJS nimmt diese Zeile und der gleiche Fehler wird für die nächste Zeile ausgelöst, dh

var import1 = require('./app.module'); 

So dieses Commonjs Stil-Format zu erkennen, ich habe versucht, SystemJS zu bekommen, aber dies führt nur in anderen Fehlern, keinen von denen sind klarer als die oben genannten.

Edit: Als ich mit es2015 Module in TSconfig wechseln und die App laufen, ich die (gefürchteten) traceur.js Fehler:

https://127.0.0.1:3443/traceur.js Failed to load resource: the server responded with a status of 404 (Not Found) 2016-09-26 10:11:19.842 127.0.0.1/:52 Error: (SystemJS) XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js Error: XHR error (404 Not Found) loading https://127.0.0.1:3443/traceur.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29) at ZoneDelegate.invokeTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:236:37) at Zone.runTask (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47) at XMLHttpRequest.ZoneTask.invoke (https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33) Error loading https://127.0.0.1:3443/traceur.js Error loading https://127.0.0.1:3443/dist/app/main.js

Ich habe dies zuvor begegnet und es gelöst durch Entfernen von auskommentiertem Code, der eine Importanweisung enthielt. Bei dieser Gelegenheit habe ich in meinem Code keine Zeilen wie diese.

Hier ist meine systemjs.config.js:

(function(global) { 
    System.defaultJSExtensions = true; 
    System.defaultExtension = 'js'; 

    // map tells the System loader where to look for things 
    // N.B. the dots at the start of the paths are very important! 
    var map = { 
     'app':      './dist/app', 
     '@angular':     './node_modules/@angular', 
     'rxjs':      './node_modules/rxjs' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app':      { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs':      { defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
     'common', 
     'compiler', 
     'compiler-cli', 
     'core', 
     'forms', 
     'http', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'router', 
     'tsc-wrapped', 
     'upgrade' 
    ]; 
    function packUmd(pkgName) { 
     packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    var setPackageConfig = packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    console.log("SystemJS packages:", packages); 
    var config = { 
     map: map, 
     packages: packages 
    }; 

    System.config(config); 

})(this); 

Edit 2: Als ich das Format von 'App' auf 'cjs' in systemjs.config.js gesetzt, dh

'app': { main: 'main.js', defaultExtension: 'js', format: 'cjs' }, 

Ich bekomme nicht mehr den Fehler in app.module.ngfactory.js oben erwähnt, wenn der Code mit commonjs kompiliert wird.

Wenn jedoch in einem Browser ausgeführt wird, erhalte ich dann die folgende Fehlermeldung (nach traceur Installation, ohne traceur bekomme ich nur die oben traceur Fehler):

(index):52 Error: (SystemJS) No provider for NgZone! Error: No provider for NgZone! at NoProviderError.Error (native) at NoProviderError.BaseError [as constructor] (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1255:38) at NoProviderError.AbstractProviderError [as constructor] (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1739:20) at new NoProviderError (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1770:20) at ReflectiveInjector_._throwOrNull (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3366:23) at ReflectiveInjector_._getByKeyDefault (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3394:29) at ReflectiveInjector_._getByKey (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3357:29) at ReflectiveInjector_.get (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3166:25) at AppModuleInjector.createInternal (https://147.252.67.223:3443/dist/app/app.module.ngfactory.js:610:69) at AppModuleInjector.NgModuleInjector.create (https://147.252.67.223:3443/node_modules/@angular/core/src/linker/ng_module_factory.js!transpiled:96:32) Evaluating https://147.252.67.223:3443/dist/app/main.js Error loading https://147.252.67.223:3443/dist/app/main.js

Mein tsconfig.json:

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "removeComments": true, 
     "noImplicitAny": true, 
     "suppressImplicitAnyIndexErrors": true, 
     "rootDir":"./src", 
     "outDir":"./dist" 
    }, 
    "angularCompilerOptions": { 
     "genDir": ".", 
     "debug": true, 
     "skipMetadataEmit": true 
    } 
} 

Jede Hilfe wird sehr geschätzt.

Answer 1

Ich stieß auf ähnliches Problem, wenn ich von Angular RC6 zu 2.0.0, wegen systemjs.config.js umschalte.

Ich end-up die ganze systemjs.config.js Basis auf der neuesten Kurzanleitung: https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files mit einigen Änderungen.

Ein Problem, das ich in Ihrem systemjs.config.js sehen fehlt Bezug auf folgende Pakete:

• es6-Beilage (oder Kern-js)
• widerspiegeln-Metadaten
• zone.js

Folgendes ist mein systemjs.config.js

(function (global) { 
    System.config({ 
     paths: { 
      'npm:': '/node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: '/app', 
      // 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 
      'es6-shim': 'npm:es6-shim', 
      'reflect-metadata': 'npm:reflect-metadata', 
      'rxjs': 'npm:rxjs', 
      'zone.js': 'npm:zone.js' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      'app': { main: 'main.js', defaultExtension: 'js' }, 
      'es6-shim': { main: 'es6-shim.min.js', defaultExtension: 'js' }, 
      'reflect-metadata': { main: 'Reflect.js', defaultExtension: 'js' }, 
      'rxjs': { main: 'bundles/Rx.min.js', defaultExtension: 'js' }, 
      'zone.js': { main: 'dist/zone.min.js', defaultExtension: 'js' } 
     } 
    }); 
})(this);