Ошибка импорта SystemJS в комплекте. Приложение Angular2

Question

У меня возникли проблемы с SystemJS.

У меня есть типичное приложение Angular2, написанное на машинописном машинописном документе. Я пытаюсь связать все мое приложение .js в один файл, чтобы оптимизировать время загрузки.

Расслоение создается глотка, используя systemjs-строитель, как это:

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

Расслоение загружается хотя тег сценария. Он работает correcly как вызов System.defined в консоли браузера показывает мои модули: System.defined

System.defined(picture)

Вот мой systemjs.config.js. Если я правильно понимаю, импорт в «приложение» должен быть разрешен для 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, ничего не происходит (то есть я не вводить мой тогда обратный вызов или мой улов блок). Вот выдержка из моего индекса:

<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 вместо импорта приложения/main.js, изменив параметры пакетирования. Благодарим вас за любую помощь, которую вы можете предоставить.

Answer 1

Я предполагаю, что вы достаточно продвинуты, и у вас есть хорошее понимание угла.

У меня была аналогичная проблема с @angular/upgrade компонентом. После серьезной головной боли, я узнал, что некоторые сообщения об ошибках теряются внутри angular2 (даже в нынешнем стабильном пакете).

Возможный источник ошибки может быть внутри @angular/compiler. RuntimeCompiler.compileComponents() теряет сообщения от CompileMetadataResolver.getNgModuleMetadata(). Простым, но не идеальным решением является обернуть вызов getNgModuleMetadata в блок try-catch.

Решение при использовании в комплекте компилятор и угловую 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) { 
... 

Очевидно, что это не идеальное решение, но я смог узнать, что один из моих модулей имел ci (которая вызывала undefined вместо действительной службы внутри NgModule.import).