使用Angular 2和webpack将服务器参数传递给ngModule
我正在尝试将参数传递给我的应用程序.我发现这个解决方案似乎对人们有用.问题是我正在使用angular-cli来设置/构建,从那以后~β.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>
yur*_*zui 12
使用webpack,您可以使用您的内容中的output.library选项来实现它webpack.config.js
步骤1
要配置它,您需要更改您的配置,如:
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>
希望它能帮到你!
| 归档时间： |
|
| 查看次数： |
3039 次 |
| 最近记录： |