提前编译时出现SystemJS错误（没有NgZone的提供者）

我成功地使用了Angular的提前编译 . 现在我已经添加了路由和延迟加载到我的应用程序，我不能让它工作了 .

我已经更新了我的代码以使用2.0（最新）版本，并且在我及时编译时运行正常 . 但在提前编译时，我收到以下错误：

（index）：52错误：（SystemJS）XHR错误（404 Not Found）loading https://127.0.0.1:3443/traceur.js错误：XHR错误（404 Not Found）loading https://127.0.0.1： 3443 / traceur.js在XMLHttpRequest.wrapFn [as_onreadystatechange]（https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29）的ZoneDelegate.invokeTask（https：//127.0） Zone.runTask中的.0.1：3443 / node_modules / zone.js / dist / zone.js：236：37）（https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136： 47）在XMLHttpRequest.ZoneTask.invoke（https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33）加载https://127.0.0.1:3443/traceur.js时出错从https://127.0.0.1:3443/加载https://127.0.0.1:3443/node_modules/@angular/core/src/linker/ng_module_factory.js为“@ angular / core / src / linker / ng_module_factory”时出错DIST /应用程序/ 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样式格式，但这只会导致其他错误，其中没有一个比上面的错误更清晰 .

Edit: 当我切换到在tsconfig中使用es2015模块并运行应用程序时，我得到（可怕的）traceur.js错误：

https://127.0.0.1:3443/traceur.js无法加载资源：服务器响应状态为404（未找到）2016-09-26 10：11：19.842 127.0.0.1/:52错误:( SystemJS）XHR错误（404 Not Found）loading https://127.0.0.1:3443/traceur.js错误：XHR错误（404 Not Found）在XMLHttpRequest.wrapFn加载https://127.0.0.1:3443/traceur.js [as_onreadystatechange]（https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:647:29）在ZoneDelegate.invokeTask（https://127.0.0.1:3443/node_modules/zone . js / dist / zone.js：236：37）在ZoneHunTask（https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:136:47）的XMLHttpRequest.ZoneTask.invoke（ https://127.0.0.1:3443/node_modules/zone.js/dist/zone.js:304:33）加载https://127.0.0.1:3443/traceur.js时出错加载https://127.0.0.1错误：3443 /距离/应用/ main.js

我以前遇到过这个并通过删除包含import语句的注释掉的代码来解决它 . 在这种情况下，我的代码中没有这样的行 .

这是我的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: 当我在systemjs.config.js中将'app'的格式设置为'cjs'时，即

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

当使用commonjs编译代码时，我不再在上面提到的app.module.ngfactory.js中收到错误 .

但是，当在浏览器中运行时，我得到以下错误（安装traceur后;没有traceur我只是得到上面的traceur错误）：

（index）：52错误：（SystemJS）没有NgZone的提供者！错误：没有NgZone的提供商！在NoProviderError.AbstractProviderError [NoProviderError.BaseError [作为构造函数]（https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1255:38）的NoProviderError.Error（native）处于NoProviderError.AbstractProviderError [新建NoProviderError（https：//147.252.67.223：3443 / node_modules / angular / core / bundles / core.umd.js：1770：20）在ReflectiveInjector . throwOrNull（https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3366:23）在ReflectiveInjector . getByKeyDefault（https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3394:29）在ReflectiveInjector . getByKey（https://147.252.67.223:3443/node_modules /@angular/core/bundles/core.umd.js:3357:29）在ReflectiveInjector_.get（https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:3166： 25）在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）评估https://147.252.67.223:3443/dist/ app / main.js加载错误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
    }
}

Any help is much appreciated.