Przekazywanie parametrów serwera na ngModule z Angular 2 i pakietem internetowym

Próbuję przekazać parametry do mojej aplikacji. Znalazłem this solution, która wydawała się działać dla ludzi. Problem polega na tym, że używam angular-cli do konfiguracji/budowania i od kiedy ~ beta.14 używa on WebPacka zamiast SystemJS.Przekazywanie parametrów serwera na ngModule z Angular 2 i pakietem internetowym

Moi main.ts wygląda następująco:

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

ale nie jestem pewien, w jaki sposób uzyskać dostęp do tej funkcji z index.html.

Moja gmina/index.html wygląda następująco:

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

Moje pytanie brzmi, jak mogę wywołać funkcję przekazać moje dane, tak jak odbywa się to w innym poście:

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

Źródło

2016-10-08 Peter Milionis

Z WebPacka można achive go za pomocą output.library opcję w swoim webpack.config.js

Krok 1

Aby skonfigurować go trzeba zmienić config jak:

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

gdzie name zostaną zastąpione nazwami punktów wpisu za.

W ten sposób moduł będzie eksponowany na zasięg globalny (okno). Na wejściu main to może wyglądać jak poniżej:

Krok 2

wpisu z main.js

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

Note: export jest koniecznie

Krok 3

Użyj go w

index.html

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

Dla HtmlWebpackPlugin może wyglądać następująco:

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

Alternatywna droga jest po prostu zdefiniować właściwość okna:

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

następnie w HTML

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

Nadzieję, że to pomaga!

Źródło

2016-10-09 07:27:11 yurzui

Dzięki! Powinienem był zauważyć, że z Angular-CLI nie ma obecnie webpack.config.js, ponieważ używa on domyślnej konfiguracji. Próbowałem hakować w plikach konfiguracyjnych Webpack w pakiecie cli, ale jestem w mojej głowie. Twoja alternatywna metoda działała jednak świetnie. –

Przekazywanie parametrów serwera na ngModule z Angular 2 i pakietem internetowym

Odpowiedz

Powiązane problemy