角2：SystemJSにバンドルを使用するように指示する方法は？

Question

私は、JavaScriptを読み込むためにSystemJSを使うAngular 2 RC7アプリを持っています。

これはSystemJSのための私の現在の設定です：

(function (global) { 

System.config({ 

    defaultExtension: 'js', 
    defaultJSExtensions: true, 

    paths: { 
     'npm:': 'node_modules/' 
    }, 

    // Let the system loader know where to look for things 
    map: { 

     // Our app is within the app folder 
     app: 'app', 

     // Angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

     // Other libraries 
     'rxjs': 'npm:rxjs', 
     'ng2-translate': 'node_modules/ng2-translate' 

    }, 

    // Tell the system loader how to load when no filename and/or no extension 
    packages: { 
     app: { main: './main.js', defaultExtension: 'js' }, 
     rxjs: { defaultExtension: 'js' }, 
     'ng2-translate': { defaultExtension: 'js' } 
    } 

}); 

})(this); 

今、私はすべての私のアプリのロジックが含まれていapp.bundle.min.js呼ばバンドル、および使用の依存関係が含まれているdependencies.bundle.min.jsを作成しました。

ファイルを個別にインポートする代わりに、これらのファイルを使用するようにSystemJSに指示する方法を教えてください。

私はこれを交換しようとしている：私のindex.htmlに

<script src="production/dependencies.bundle.min.js"></script> 
<script src="production/app.bundle.min.js"></script> 

、それは働いていない：と

<script> 
    System.import('app').catch(function(err){ 
    console.error(err); 
    }); 
</script> 

。私がSystem.import...スクリプトブロックをindex.html内に保持している限り、アプリケーションはロードしますが、バンドルではなく個々のファイルを使用します。

また、私は、これを変更しようとした：

map: { 

    // Our app is within the app folder 
    app: 'production/app.bundle.min.js', 

が、それはどちらか動作しませんでした。

これは、バンドルががぶ飲みを使用して生成される方法である：私は何とかバンドルに向けて指すように私のSystemJS構成内のマッピングを変更する必要が疑われる

gulp.task('inline-templates', function() { 

return gulp.src('app/**/*.ts') 
.pipe(inlineNg2Template({ 
    UseRelativePaths: true, 
    indent: 0, 
    removeLineBreaks: true 
})) 
.pipe(tsc({ 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false, 
    "suppressImplicitAnyIndexErrors": true 
})) 
.pipe(gulp.dest('dist')); 

}); 

gulp.task('bundle-app', ['inline-templates'], function() { 

var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js'); 

return builder 
    .bundle('dist/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'production/app.bundle.min.js', { 
     minify: true, 
     mangle: true 
    }) 
    .then(function() { 
     console.log('Build complete'); 
    }) 
    .catch(function(err) { 
     console.log('Build error'); 
     console.log(err); 
    }); 

}); 

gulp.task('bundle-dependencies', ['inline-templates'], function() { 

var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js'); 

return builder 
    .bundle('dist/**/*.js - [dist/**/*.js]', 'production/dependencies.bundle.min.js', { 
     minify: true, 
     mangle: true 
    }) 
    .then(function() { 
     console.log('Build complete'); 
    }) 
    .catch(function(err) { 
     console.log('Build error'); 
     console.log(err); 
    }); 

}); 

gulp.task('production', ['bundle-app', 'bundle-dependencies'], function(){}); 

？これはどうすればいいですか？

Answer 1

あなたSystemJSの設定でmapとpackagesによると、

System.import('app') 

は、ファイルapp/main.jsの要求に変換します。あなたが生成されたアプリケーションバンドルに見える場合は、あなたは、バンドルがdistフォルダに.jsファイルから生成されたため、このモジュールは、実際に

System.registerDynamic("dist/main.js" ... 

として登録されていることを参照してください。

この不一致が、モジュールがスクリプトバンドルからロードされない理由です。 .tsappで、.jsをdistに -

一つの可能​​な解決策は、常に別のフォルダに.tsと.jsファイルを維持することです。その方法は、systemjsはたったの約distを知っておく必要があります。変更する必要があるsystemjs.config.jsの一部のみがappマッピングです：

// Let the system loader know where to look for things 
map: { 

    // Our app is compiled to js files in the dist folder 
    app: 'dist', 

それが動作することを確認するために、私はangular quickstart exampleから開始してgulpfile.jsを追加しましたこれらのタスク：

1. コンパイルtypescriptですdistにはgulp-typescriptプラグインを使用します。distフォルダに

   var gulp = require('gulp'); 
   var typescript = require('typescript'); 
   var tsc = require('gulp-typescript'); 
   
   var systemjsBuilder = require('systemjs-builder'); 
   
   gulp.task('tsc', function() { 
   
       return gulp.src(['app/**/*.ts', 'typings/index.d.ts']) 
       .pipe(tsc({ 
        "target": "es5", 
        "module": "commonjs", 
        "moduleResolution": "node", 
        "sourceMap": true, 
        "emitDecoratorMetadata": true, 
        "experimentalDecorators": true, 
        "removeComments": true, 
        "noImplicitAny": false, 
        "suppressImplicitAnyIndexErrors": true 
       })) 
       .js.pipe(gulp.dest('dist')); 
   }); 
   

2. コピーsystemjs設定ファイル、アプリのコードと一緒に同梱されますされており、製造工程で利用できるようになりますように（あなたがbundleなくbuildStaticを使用しているので、それが必要です）

   gulp.task('bundle-config', function() { 
       return gulp.src('app/configs/systemjs.config.js') 
       .pipe(gulp.dest('dist/configs')); 
   }); 
   

3. systemjsビルダーとのバンドルを生成します。

   gulp.task('bundle-app', ['bundle-config', 'tsc'], function() { 
   
       var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js'); 
       return builder 
        .bundle('[dist/**/*]', 'production/app.bundle.min.js', { 
         minify: true, 
         mangle: true 
        }) 
        .then(function() { 
         console.log('Build complete'); 
        }) 
        .catch(function(err) { 
         console.log('Build error'); 
         console.log(err); 
        }); 
   
   }); 
   
   gulp.task('bundle-dependencies', ['bundle-config', 'tsc'], function() { 
   
       var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js'); 
       return builder 
        .bundle('dist/**/* - [dist/**/*.js]', 'production/dependencies.bundle.min.js', { 
         minify: true, 
         mangle: true 
        }) 
        .then(function() { 
         console.log('Build complete'); 
        }) 
        .catch(function(err) { 
         console.log('Build error'); 
         console.log(err); 
        }); 
   
       }); 
   
   gulp.task('production', ['bundle-app', 'bundle-dependencies'], function(){}); 
   

依存関係なしでアプリケーションバンドルを生成するには、[dist/**/*]という構文が使用されていることに注意してください.gulpfile.js内のバンドルは異なり、依存関係を含むはるかに大きなバンドルを生成します。

その後、私はindex.htmlから、これらの変更とindex-production.htmlを作成しました：

1. はsystemjs.config.jsため<script>タグを削除 - 私たちは

2. <head>

   <script src="production/dependencies.bundle.min.js"></script> 
   <script src="production/app.bundle.min.js"></script> 
   

   にバンドル用<script>タグを追加バンドルからインポートします

3. add inline 0 - 彼らはすべてのモジュールが利用できるようにしているbundleで生成されたバンドルは何もインポートしないと任意のコードを実行していないため

   「アプリ」モジュールをインポート

   <script> 
       System.import('dist/configs/systemjs.config.js').then(function() { 
       System.import('app').catch(function(err){ console.error(err); }); 
       }); 
   </script> 
   

が必要です：configおよびアプリモジュールをインポート後でインポートするために、buildStaticで生成された 'sfx'バンドルとは異なります。

また、このスクリプトブロックは<my-app>要素がまだ作成されていない場合にそうappがあまりにも早く開始し、<body><my-app>後の要素であることが必要である（あるいは、import('app')は「文書準備」イベントで呼び出すことができます）。

あなたはgithubの上の完全な例を見つけることができます：ハード