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

Posted

技术标签:

【中文标题】提前编译时出现 SystemJS 错误（NgZone 没有提供程序）【英文标题】：SystemJS error when compiling ahead-of-time (no provider for NgZone) 【发布时间】：2017-01-29 23:40:57 【问题描述】：

我之前成功使用过Angular的提前编译。现在我已经在我的应用程序中添加了路由和延迟加载，但我不能再让它工作了。

我已更新我的代码以使用 2.0（最新）版本，并且当我即时编译时它运行良好。但是提前编译时出现以下错误：

(index):52 错误: (SystemJS) XHR 错误 (404 Not Found) 正在加载 https://127.0.0.1:3443/traceur.js 错误：XHR 错误（404 未找到） 正在加载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.0.1:3443/node_modules/zone.js/dist/zone.js:236:37) 在 Zone.runTask (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/node_modules/@angular/core/src/linker/ng_module_factory.js 作为“@angular/core/src/linker/ng_module_factory”来自 https://127.0.0.1:3443/dist/app/app.module.ngfactory.js

查看app.module.ngfactory.js，有一堆类似如下的import：

...
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资源加载失败：服务器 响应状态为 404（未找到）2016-09-26 10:11:19.842 127.0.0.1/:52 错误：（SystemJS）XHR 错误（404 未找到）正在加载 https://127.0.0.1:3443/traceur.js 错误：XHR 错误（404 未找到） 正在加载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.0.1:3443/node_modules/zone.js/dist/zone.js:236:37) 在 Zone.runTask (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/dist/app/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);

编辑 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.Error （本机） 在 NoProviderError.BaseError [作为构造函数] (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1255:38) 在 NoProviderError.AbstractProviderError [作为构造函数] (https://147.252.67.223:3443/node_modules/@angular/core/bundles/core.umd.js:1739:20) 在新的 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) 在 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

非常感谢任何帮助。

【问题讨论】：

【参考方案1】：

由于systemjs.config.js，我从 Angular RC6 切换到 2.0.0 时遇到了类似问题。

我最终会根据最新的快速入门指南 https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files 重新完成整个 systemjs.config.js 并进行一些修改。

我在您的 systemjs.config.js 中看到的一个问题是缺少对以下软件包的引用：

es6-shim（或 core-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);

【讨论】：

感谢您的建议。我试过了，但没有用。仍然出现同样的错误。 @BrendanB 你能 github 回购吗？ 谢谢，但我不能。这是一个私人工作项目。我将尝试使用 Angular CLI。一切顺利。 @BrendanB angular-cli 真的容易多了。它使您免于所有设置麻烦，尤其是所有 webpack 配置、prod vs dev 等。

以上是关于提前编译时出现 SystemJS 错误（NgZone 没有提供程序）的主要内容，如果未能解决你的问题，请参考以下文章

为啥编译时出现多个定义错误？

编译时出现graphQL错误

编译时出现ARC错误

尝试编译函数时出现语法错误

编译过程时出现oracle错误

在 Qt 中编译项目时出现错误