使用Angular 2和Webpack将服务器参数传递给ngModule [英] Passing server parameters to ngModule with Angular 2 and webpack
问题描述
我正在尝试将参数传递给我的应用程序.我发现了此解决方案，它似乎已经为人们所用.问题是我正在使用angular-cli进行设置/构建，并且从〜beta.14开始，它就使用webpack而不是SystemJS.
I'm trying to pass parameters to my application. I found this solution which seems to have worked for people. The problem is I am using angular-cli to set up/build and ever since ~beta.14 it uses webpack instead of SystemJS.
我的main.ts看起来像这样:
My main.ts looks like this:
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访问此功能.
but I'm not sure how to access this function from index.html.
我的dist/index.html看起来像这样:
My dist/index.html looks like this:
<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>
我的问题是，如何调用函数以传递数据，就像在另一篇文章中所做的那样:
My question is, how do I call the function to pass my data in, like is done in the other post:
<script>
System.import('app').then(module => module.main('This is RIGHT'),
console.error.bind(console)
);
</script>
推荐答案
使用webpack，您可以使用webpack.config.js
With webpack you can achive it by using output.library option within your webpack.config.js
第1步
要配置它，您需要像以下更改您的配置:
To configure it you need to change your config like:
output: {
...
library: '[name]'
},
，其中name将替换为条目点的名称.
where name will be replaced with names of your entry's points.
这样，您的模块将公开到全局范围(窗口).对于main条目，它可能如下所示:
This way your module will expose to global scope (window). For the main entry it might look as shown below:
第2步
条目 main.js
export function run(appLocalized: any) {
platformBrowserDynamic([{provide: 'AppLocalized', useValue: appLocalized }])
.bootstrapModule(AppModule);
}
注意 :export必定
第3步
在您的
index.html
// after all your bundles files
<script>
main.run('Passing server parameters to ngModule with Angular 2 and webpack');
</script>
对于HtmlWebpackPlugin，它可能类似于:
For HtmlWebpackPlugin it might look like:
<% 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>
希望它对您有帮助！
这篇关于使用Angular 2和Webpack将服务器参数传递给ngModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
