提前編譯時出現SystemJS錯誤（沒有NgZone的提供者）

Question

我已經在成功之前使用了Angular的提前編譯。現在我已經添加了路由和延遲加載到我的應用程序，並且我無法再繼續工作。

我已更新我的代碼以使用2.0（最新）版本，並且在我即時編譯時運行正常。但是編譯名列前茅的時候，我收到以下錯誤時：

(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

看着app.module.ngfactory.js，也有類似以下一堆進口：

... 
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'); 
... 

我「已經注意到，如果我改變

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

到

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

個

SystemJS接受這一行，並觸發下一行相同的錯誤，即

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

所以我一直試圖讓SystemJS認識到這一點CommonJS的風格格式，但這只是導致其他錯誤，沒有其中比上面的更清楚。

編輯： 當我切換到tsconfig使用ES2015模塊和運行應用程序，我得到了（可怕）traceur.js錯誤：

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

我在這之前遇到並解決它通過刪除包含導入語句的註釋掉的代碼。在這種情況下，我的代碼中沒有這樣的行。

這裏是我的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); 

編輯2： 當我設置 '應用' 的格式在systemjs.config.js 'CJS'，即

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

當使用commonjs編譯代碼時，我不再在上面提到的app.module.ngfactory.js中出現錯誤。

然而，在瀏覽器中運行的時候，然後我得到以下錯誤（安裝後traceur;沒有traceur我剛剛得到上述traceur錯誤）：

(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

我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 
    } 
} 

任何幫助，非常感謝。

Answer 1

我遇到了類似的問題，當我從角RC6切換到2.0.0，由於systemjs.config.js。

我最終根據最新的快速入門指南https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files重新做了整個systemjs.config.js的一些修改。

一個問題我在你systemjs.config.js查看缺失參照以下軟件包：

• ES6-墊片（或核心-JS）
• 反映的元數據
• zone.js

以下是我的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);