Question

我试图将参数传递给我的应用程序。我发现this solution似乎对人有用。问题是我使用angular-cli来设置/构建，从那时起~β14它使用webpack而不是SystemJS。

我的主要内容如下：

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>

Answer 1

使用网络包，您可以使用webpack.config.js

中的output.library选项取消它

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

希望它可以帮到你！

使用Angular 2和webpack将服务器参数传递给ngModule

1 个答案: