我正在尝试将参数传递给我的应用程序.我发现
this solution似乎对人有用.问题是我正在使用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>
使用webpack,您可以在webpack.config.js中使用
output.library选项来实现它
步骤1
要配置它,您需要更改您的配置,如:
output: { ... library: '[name]' },
其中name将替换为您的条目点的名称.
这样,您的模块将公开到全局范围(窗口).对于主条目,它可能如下所示:
第2步
进入main.js
export function run(appLocalized: any) { platformBrowserDynamic([{provide: 'AppLocalized',useValue: appLocalized }]) .bootstrapModule(AppModule); }
注意:出口必然
第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>
希望它能帮到你!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。