SystemJS error when compiling ahead-of-time (no provider for NgZone)

2
votes

I've used Angular's ahead-of-time compilation before successfully. Now I've added routing and lazy loading to my app, and I can't get this to work anymore.

I have updated my code to use the 2.0 (latest) release, and it runs fine when I compile just-in-time. But when compiling ahead-of-time I get the following error:

(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

Looking at app.module.ngfactory.js, there are a bunch of imports similar to the following:

...
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've noticed that if I change

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

to

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

SystemJS accepts this line and the same error is triggered for the next line, i.e. 

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

So I've been trying to get SystemJS to recognize this CommonJS style format, but this just results in other errors, none of which are any clearer than the one above.

Edit: When I switch to using es2015 modules in tsconfig and run the app, I get the (dreaded) traceur.js error:

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

I've encountered this before and resolved it by removing commented out code that contained an import statement. On this occasion I don't have any lines in my code like this.

Here is my 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: When I set the format of 'app' to 'cjs' in systemjs.config.js, i.e.

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

I no longer get the error in app.module.ngfactory.js mentioned above when the code is compiled using commonjs.

However, when running in a browser, I then get the following error (after installing traceur; without traceur I just get the above traceur error):

(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

My 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.

1
javascriptangulartypescript

1 Answers

1
votes

I ran into similar issue when I switch from Angular RC6 to 2.0.0, due to systemjs.config.js.

I end up re-do the whole systemjs.config.js base on the latest quick start guide: https://angular.io/docs/ts/latest/quickstart.html#!#add-config-files with some modification.

One issue I see in your systemjs.config.js is missing reference to following packages:

  • es6-shim (or core-js)
  • reflect-metadata
  • zone.js

Following is my 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);