在绑定的Angular2应用中,SystemJS导入会静默失败

SystemJS import fails silently on bundled Angular2 app

本文关键字:导入 SystemJS 静默 失败 绑定 Angular2 应用      更新时间:2023-09-26

我在使用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();
        });
});

bundle通过script标签加载。它可以正确地工作,因为在浏览器控制台中调用system .define会显示我的模块: System.defined

System.defined(图)

这是我的systemjs.config.js。如果我理解正确的话,导入"app"应该解析为wwwroot/app/main。,然后通过"bundles"参数转到bundle文件。

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,改变捆绑选项。谢谢你提供的任何帮助。

我认为你已经相当高级了,并且对angular有很好的理解。

我对@angular/upgrade组件有类似的问题。在严重头痛之后,我发现一些错误信息在angular2中丢失了(即使在当前稳定的包中)。

可能的错误来源可能在@angular/compiler内部。RuntimeCompiler.compileComponents()正在丢失来自CompileMetadataResolver.getNgModuleMetadata()的消息。简单但不理想的解决方案是在try-catch块中封装对getNgModuleMetadata的调用。

当你使用捆绑编译器和angular 2.0.0时的解决方案:

compiler.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内的有效服务)。