付属のAngular2アプリでSystemJSのインポートが黙って失敗する

Question

SystemJSに問題があります。

Typescriptで書かれた典型的なAngular2アプリケーションがあります。 ロードタイムを最適化するために、すべてのアプリケーション.jsを1つのファイルにバンドルしようとしています。バンドルは、このように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(); 
     }); 
}); 

バンドルは、スクリプトタグのにロードされます。ブラウザコンソールでSystem.definedへの呼び出しは、私のモジュールを示してそれはcorrecly作品：ここ

System.defined(picture)

をSystem.defined は私systemjs.config.jsです。私が物事を正しく理解するならば、 "app"へのインポートはwwwroot/app/main.tsに解決され、その後 "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をからの私のエントリポイントをインポートしようといったんしかし、何も（私はその後、catchブロックをコールバックか、私を入力していないという意味）起こりません。私は、アプリ/ main.jsをインポートし、代わりにbundleStaticを使用してバンドルオプションを変更するようにいろいろなことを試してみました

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

：ここに私の指数の抽出物です。 ご協力いただきありがとうございます。

Answer 1

私はあなたがかなり進んでおり、あなたは良い角度2理解を持っていると仮定します。

私は@angular/upgradeコンポーネントと同様の問題がありました。深刻な頭痛の後、私はエラーメッセージのいくつかがangular2の中で失われていることを知りました（現在安定しているパッケージでさえ）。

考えられるエラーの原因は、@angular/compilerです。 RuntimeCompiler.compileComponents()は、CompileMetadataResolver.getNgModuleMetadata()からメッセージを失っています。シンプルではありませんが、try-catchブロックでgetNgModuleMetadataへの呼び出しをラップするのが理想的ではありません。

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

あなたがバンドルされてコンパイラや角度2.0.0を使用している

ソリューション

明らかに、これは理想的な解決策ではありませんが、私のモジュールの1つにciがあることが分かりました（これはNgModule.importの中に有効なサービスの代わりにundefinedを引き起こしていました）。