Angular 2 ve webpack ile ngModule'e sunucu parametrelerini geçirme

Uygulamalarıma parametreler geçirmeye çalışıyorum. İnsanlara çalışmış gibi görünen this solution'u buldum. Sorun şu ki, kurmak/kurmak ve o zamandan beri SystemJS yerine web paketi kullanan beta.14 için açısal-uç kullanıyorum.Angular 2 ve webpack ile ngModule'e sunucu parametrelerini geçirme

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

ama index.html bu işleve erişmek için nasıl emin değilim:

Benim main.ts buna benzer.

My dist/index.html şuna benzer:

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

Sorum başka yazı yapılır gibi, benim veri aktarmak için işlev çağrısı, nasıl olduğunu:

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

WebPack ile

kaynak

2016-10-08 Peter Milionis

size webpack.config.js

1. Adımiçinde output.library seçeneğini kullanarak bunu elde edebilirsiniz Eğer gibi yapılandırma değiştirmeniz gerekir bunu yapılandırmak için: name sizin girişin noktalarının adları ile değiştirilecektir

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

Bu şekilde, modülünüz genel kapsamı (pencere) gösterecektir. main giriş için o kadar aşağıda gösterildiği görünebilir:

Adım 2

entry main.js

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

Not: export mutlaka edilir

Adım 3

sizin

index.html günlerde kullan o gibi görünebilir HtmlWebpackPlugin için

// 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 
}),

Alternatif bir yol sadece pencere özelliğini tanımlamak edilir: En html ardından

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

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

Umut size yardımcı olur!

kaynak

2016-10-09 07:27:11 yurzui

Teşekkürler! Angular-CLI ile şu anda herhangi bir webpack.config.js olmadığını, şu anda bir varsayılan kurulum kullandığını belirtmeliydim. Web paketi yapılandırma dosyalarında korsan paketinde hack yapmayı denedim ama kafamın üstündeyim. Alternatif yönteminiz harika çalıştı. –

Angular 2 ve webpack ile ngModule'e sunucu parametrelerini geçirme

cevap

İlgili konular