SystemJS導入在捆綁的Angular2應用上無提示地失敗

Question

我在使用SystemJS時遇到麻煩。

我有一個用Typescript編寫的典型Angular2應用程序。 我試圖將所有應用程序.js捆綁到一個文件中，以優化加載時間。

捆綁包是由gulp使用systemjs-builder創建的，如下所示：

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();
        });
});

通過腳本標記加載捆綁軟件。 它在瀏覽器控制台中對System.defined的調用正確地顯示了我的模塊： System.defined

System.defined（圖片）

這是我的systemjs.config.js。 如果我理解正確，則導入“ app”應解析為wwwroot / app / main.ts，然后通過“ bundles”參數解析為捆綁文件。

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);

但是，一旦我嘗試從index.html導入我的入口點，就什么也沒有發生（這意味着我不輸入我的then回調或catch塊）。 這是我的索引的一部分：

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

我嘗試了各種方法，例如改用bundleStatic，導入app / main.js，更改捆綁選項。 感謝您提供任何幫助。

Answer 1

我認為您很高級，並且對Angular2有很好的理解。

我對@angular/upgrade組件有類似的問題。 經過嚴重的頭痛之后，我發現在angular2內部（甚至在當前穩定的軟件包中）丟失了一些錯誤消息。

錯誤的可能來源可以在@angular/compiler內部。 RuntimeCompiler.compileComponents()正在丟失來自CompileMetadataResolver.getNgModuleMetadata()消息。 簡單但不是理想的解決方案是getNgModuleMetadata調用getNgModuleMetadata在try-catch塊中。

使用捆綁的編譯器和angular 2.0.0時的解決方案：

editor.umd.js：第16799行

更改此：

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) {
   ...

至：

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) {
 ...

顯然，這不是理想的解決方案，但是我能夠發現我的一個模塊具有循環依賴關系（這導致undefined而不是NgModule.import內部的有效服務）。