我正在尝试将参数传递给我的应用程序。我找到了 this solution这似乎对人们有用。问题是我正在使用 angular-cli 来设置/构建，从 ~beta.14 开始它就使用 webpack 而不是 SystemJS。
我的 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，您可以使用 output.library 来实现它webpack.config.js
第一步
要配置它，您需要像这样更改您的配置:
output: {
...
library: '[name]'
},
其中 name 将替换为您输入的点的名称。
这样你的模块将暴露给全局范围(窗口)。对于 main 条目，它可能如下所示:
第 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 (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 - 使用 Angular 2 和 webpack 将服务器参数传递给 ngModule，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39938018/