CODEWITHSUNDEEP
angulardeploymentmodulecompilationsystemjs
BeetleJuice
BeetleJuice

Reputation: 40896

Use SystemJS-builder to bundle Angular 2 Ahead-of-Time Compiler files

I've compiled my Angular 2 app written in typescript 2 using the Ahead-of-Time compilation instructions on angular.io.

main.ts

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Now I have a lot of ngfactory.ts files as well as .js files. To tree-shake and bundle, I'm using the simple systemjs-builder task below:

gulp.task('demo-bundle', function() {
    var builder = new SystemBuilder();

    builder.loadConfig('./systemjs.config.js')
        .then(function(){
            return builder.buildStatic('dev/main.js', 'dist/bundle.js', {
                encodeNames:false,
                mangle: false,
                rollup: true
            });
        })
});

The bundling completes without errors, but the app fails in the browser with error:

Error: No provider for NgZone!

If I change from Ahead-of-time to Just-in-time compilation by bootstrapping with:

platformBrowserDynamic().bootstrapModule(AppModule);

Then the bundling and the app work as intended.

Any ideas on how to properly bundle the AoT compilation with buildStatic? (In tsconfig, module is es2015 but I've also tried system and commonjs)

@angular/compiler-cli 0.6.3, systemjs-builder 0.15.31, systemjs 0.19.39

Upvotes: 2

Views: 1101

Answers (1)

B. Normoyle
B. Normoyle

Reputation: 46

I spent ages tracking this down - loading the umd bundles for the angular modules causes this error. Change to loading the index.js file in their folder instead.

Upvotes: 3

Related Questions