SystemJS导入在捆绑的Angular2应用上无提示地失败

Question

I am having trouble with SystemJS.

I have a typical Angular2 application written in Typescript. I am trying to bundle all my application .js into a single file to optimize load time.

The bundle is created by gulp using systemjs-builder like this :

gulpfile.js

paths.compiledTs = "./wwwroot/app";
gulp.task('bundle:app', function (done) {
    var builder = new Builder("/", './systemjs.config.js');
    var builderConfig = {
        normalize: true,
        minify: true,
        mangle: true,
        runtime: false
    };
    builder.bundle(paths.compiledTs + '/main.js', paths.compiledTs + '/middleware-app.js', builderConfig)
        .then(function () {
            done();
        })
        .catch(function (err) {
            console.log(err);
            done();
        });
});

The bundle is loaded though script tag. It works correcly as a call to System.defined in the browser console shows my modules : System.defined

System.defined(picture)

Here is my systemjs.config.js. If I understand things correctly, an import to "app" should resolve to wwwroot/app/main.ts, then to the bundle file through the "bundles" parameter.

systemjs.config.js

/**
 * System configuration
 */
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'wwwroot/app',
        '@angular': 'wwwroot/lib/@angular'
    };
    // 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' },
        'lodash': { defaultExtension: 'js' },
        'moment': { defaultExtension: 'js' },
        'pikaday': { defaultExtension: 'js' },
        'ng2-translate': { defaultExtension: 'js' },
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router'
    ];
    // Individual files (~300 requests):
    function packNgIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packNgUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setNgPackageConfig = System.packageWithIndex ? packNgIndex : packNgUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setNgPackageConfig);

    var config = {
        defaultJSExtensions: true,
        baseURL: global.baseUrl,
        paths: {
            "lodash": "wwwroot/lib/lodash.min.js",
            "moment": "wwwroot/lib/moment.min.js",
            "pikaday": "wwwroot/lib/pikaday.js"
        },
        map: map,
        packages: packages,
        meta: {
            pikaday: {
                deps: ['moment']
            },
            'angular2/*': {
                build: false
            },
            'rxjs/*': {
                build: false
            },
            'ng2-translate/*': {
                build: false
            }
        },
        bundles: {
            "wwwroot/lib/bundles/rxjs.min.js": [
                "rxjs/*",
                "rxjs/operator/*",
                "rxjs/observable/*",
                "rxjs/add/operator/*",
                "rxjs/add/observable/*",
                "rxjs/util/*"
            ],
            "wwwroot/lib/bundles/ng2-translate.min.js": [
                "ng2-translate/*"
            ],
            "wwwroot/app/middleware-app.js": [
                "app/*",
                "app/common/busy-indicator/*",
                "app/common/config/*",
                "app/common/date-picker/*",
                "app/common/dialog/*",
                "app/common/guards/*",
                "app/common/interface/*",
                "app/common/login/*",
                "app/common/models/*",
                "app/common/pagination/*",
                "app/common/services/*",
                "app/common/storage/*",
                "app/i18n/*",
                "app/layout/*",
                "app/pages/authentication/*",
                "app/pages/logs/*",
                "app/pages/monitoring/*",
                "app/pages/not-found/*",
                "app/pages/referentials/*",
                "app/pages/reports/*"
            ]
        }
    };
    System.config(config);
})(this);

However once I attempt to import my entry point from index.html, nothing happens (meaning I don't enter my then callback or my catch block). Here is an extract of my index :

<script src="@Href("~/wwwroot/app/middleware-app.js")"></script>
<script type="text/javascript">
    System.import('app')
        .then(app => {
            console.log("never entered");
            var endpoint = '@endpointUrl';
            var version = '@Html.Version()';
            var production = @Html.IsProductionEnabled();
            app.run(endpoint, version, production);
        })
        .catch(function (err) {
            console.log("never entered as well");
            console.error(err); 
        });
</script>

I have tried various things like using bundleStatic instead, importing app/main.js, changing the bundling options. Thank you for any help you can provide.

Answer 1

I assume that you are quite advanced and you have good angular2 understanding.

I had similar issue with @angular/upgrade component. After serious headache, I have found out that some of the error messages are lost inside angular2 (even in currently stable package).

The possible source of error can be inside @angular/compiler . The RuntimeCompiler.compileComponents() is losing messages from CompileMetadataResolver.getNgModuleMetadata() . Simple, yet not ideal solution is to wrap call to getNgModuleMetadata in try-catch block.

Solution when you are using bundled compiler and angular 2.0.0:

compiler.umd.js:line 16799

Change this:

RuntimeCompiler.prototype._compileComponents = function (mainModule, isSync) {
      var _this = this;
      var templates = new Set();
      var loadingPromises = [];
      var ngModule = this._metadataResolver.getNgModuleMetadata(mainModule);
      ngModule.transitiveModule.modules.forEach(function (localModuleMeta) {
   ...

to:

RuntimeCompiler.prototype._compileComponents = function (mainModule, isSync) {
      var _this = this;
      var templates = new Set();
      var loadingPromises = [];
      try {
        var ngModule = this._metadataResolver.getNgModuleMetadata(mainModule);
      } catch(e) {
        console.log(e);
        throw e;
      }
      ngModule.transitiveModule.modules.forEach(function (localModuleMeta) {
 ...

Obviously, this is not ideal solution, but I was able to find out that one of my modules had circular dependency (which was causing undefined instead of valid service inside NgModule.import ).