Search code examples
angularbreezesystemjs-builder

Angular 2 & BreezeJS & SystemJS Build - Multiple anonymous defines

I'm trying to build my Angular 2 & BreezeJS application by using SystemJS Build tool through gulpfile. However when I try to execute the build task, I get Multiple anonymous defines error.

On the other hand, if I run the application by directly including system.js and systemjs.config.js to my page, it works without any problem.

So, what does this error exactly mean, and is it possible to build my application with systemjs-builder?

  • breeze-client: 1.6.0
  • systemjs: 0.19.41
  • systemjs-builder: 0.15.34

systemjs.config.js

(function (global) {
    "use strict";

    System.config({
        defaultJSExtensions: true,
        paths: {
            "npm:": "node_modules/"
        },
        map: {
            "app": "app/main",
            "@angular/core": "npm:@angular/core/bundles/core.umd",
            "@angular/common": "npm:@angular/common/bundles/common.umd",
            "@angular/compiler": "npm:@angular/compiler/bundles/compiler.umd",
            "@angular/http": "npm:@angular/http/bundles/http.umd",
            "@angular/platform-browser": "npm:@angular/platform-browser/bundles/platform-browser.umd",
            "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd",
            "rxjs": "npm:rxjs",
            "datajs": "npm:datajs/index",
            "breeze-client": "npm:breeze-client/breeze.debug",
            "breeze-bridge-angular2": "npm:breeze-bridge-angular2/index",
        }
    });
})(this);

gulpfile.js

"use strict";

var gulp = require("gulp");

gulp.task("build", function () {
    var Builder = require("systemjs-builder");
    var builder = new Builder("", "./systemjs.config.js");

    return builder.buildStatic("app", "./app/app.js", { encodeNames: false })
        .catch(function (error) {
            console.log("error", error);
        });
});
Solution

  • The issue is that breeze.debug.js contains the core breeze files and all the adapters in it.

    The solution is to use breeze.base.debug.js with separate adapters.

    One important difference is that you need to explicitly import additional adapters to your application, and I believe the ideal location to do that is your entity manager.

    Here is a working example. It also contains build-breeze.debug task that is using breeze.debug.js and failing with Multiple anonymous defines error. https://github.com/forCrowd/Labs-BreezeJS-SystemJSBuilder