Angular 2とwebpackでngModuleにサーバーパラメータを渡す

パラメータをアプリケーションに渡そうとしています。私は人々のために働いたようだthis solutionを見つけました。問題は、セットアップ/ビルドにAngular-Cliを使用していて、それ以来、SystemJSの代わりにwebpackを使用しているからです。Angular 2とwebpackでngModuleにサーバーパラメータを渡す

私main.tsは、次のようになります。

import './polyfills.ts'; 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { environment } from './environments/environment'; 
import { AppModule } from './app/'; 

if (environment.production) { 
    enableProdMode(); 
} 

export function main(appLocalized: any) { 
    platformBrowserDynamic([{provide: 'AppLocalized', useValue: appLocalized }]) 
    .bootstrapModule(AppModule); 
}

が、私はindex.htmlをからこの機能にアクセスするかどうかはわかりません。

マイDIST/index.htmlには、次のようになります。

<body> 
    <app-root>Loading...</app-root> 
<script type="text/javascript" src="inline.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

私の質問は、他のポストで行われているように私は、中に私のデータを渡すための関数を呼ぶのですか、次のとおりです。

<script> 
    System.import('app').then(module => module.main('This is RIGHT'), 
       console.error.bind(console) 
      ); 
</script>

WebPACKので

出典

2016-10-08 Peter Milionis

あなたwebpack.config.js

ステップ1以内output.libraryオプションを使用して、それをachiveすることができますはあなたのようなあなたの設定を変更する必要があり、それを構成するには：nameがあなたのエントリのポイントの名前に置き換えられます

output: { 
    ... 
    library: '[name]' 
},

。

この方法で、モジュールはグローバルスコープ（ウィンドウ）に公開されます。以下に示すようにmainエントリのためにはなります

ステップ2

エントリmain.js

export function run(appLocalized: any) { 
    platformBrowserDynamic([{provide: 'AppLocalized', useValue: appLocalized }]) 
    .bootstrapModule(AppModule); 
}

注：exportは必ずしもです

ステップ3

それは次のようになりますHtmlWebpackPluginのためにあなたの

index.htmlを

// after all your bundles files 
<script> 
    main.run('Passing server parameters to ngModule with Angular 2 and webpack'); 
</script>

でそれを使用します。

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %> 
<script src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script> 
<% } %> 

<script> 
    main.run('Passing server parameters to ngModule with Angular 2 and webpack'); 
</script>

webpack.config。JS

new HtmlWebpackPlugin({ 
    template: 'src/index.html', 
    inject: false <== don't forget this line 
}),

代替方法はちょうど窓のプロパティを定義している：

window["run"] = function(appLocalized: any) { 
    platformBrowserDynamic([{provide: 'AppLocalized', useValue: appLocalized }]) 
    .bootstrapModule(AppModule); 
}

は、あなたのHTML内

<script> 
    run('Passing server parameters to ngModule with Angular 2 and webpack'); 
</script>

は、それはあなたのお役に立てば幸い！

出典

2016-10-09 07:27:11 yurzui

ありがとうございました！ Angular-CLIでは、デフォルト設定を使用しているため、webpack.config.jsは今のところ存在しません。私はcliパッケージのwebpack設定ファイルをハッキングしようとしましたが、そこに私の頭があります。あなたの代わりの方法はうまくいった。 –

Angular 2とwebpackでngModuleにサーバーパラメータを渡す

答えて

関連する問題