Question

我们可以在angular和Front-end本身中分离renderModuleFactory吗？我有一个前端项目，我想用renderModuleFactory / Platform-server（new Angular Universal）的强大功能来提升它

但我想将通用添加为一个单独的项目。

我想在一个主机（S3）中提供我的UI项目，但在另一个NodeJS服务器中提供renderModuleFactory。我想从该服务器（S3）

将模板和JS文件提供给NodeJS

但我感到困惑，我们如何配置Platform-server来请求来自外部托管的文件？

非常感谢任何指导/链接

PS。根据这篇文章：https://www.softwarearchitekt.at/post/2017/03/07/server-side-rendering-with-angular-4.aspx 在[function ngExpressEngine]中，我们可以创建自己的逻辑来连接到另一台服务器（s3）

有没有更容易或更成熟的解决方案？

Answer 1

我找到了解决方案

感谢@FrozenPandaz，在这个回购中：https://github.com/FrozenPandaz/ng-universal-demo

您可以按照以下方式修改Webpack，它将起作用

在Webpack的client.config中

更改输出部分

  output: {
    path: root('dist'),
    filename: 'static/[name]-[chunkhash].js',
    chunkFilename: 'static/chunk-[chunkhash]-[id].js'
  },

和GlobCopyWebpackPlugin

    new GlobCopyWebpackPlugin({
      patterns: [
        {glob: 'assets', output: 'static'},
        {glob: 'manifest.json', output: 'static'},
        {glob: 'favicon.ico', output: 'static'}
      ],
      globOptions: {
        cwd: root('src'),
        dot: true,
        ignore: '**/.gitkeep'
      }
    }),

它会将客户端文件移动到名为static的子目录但服务器端文件将保留在dist文件夹中和index.html将按预期从NodeJS服务（根据SSR要求）

在webpack ExtractTextPlugin的common.config中应该更改并再次使用static作为前缀，将css文件移动到静态文件夹

现在所有的链接和文件夹结构都是正确的

静态文件夹可以从S3或任何其他静态文件托管服务 dist文件夹中的其他文件是从NodeJS提供服务的最小文件

希望它能帮助别人

Angular4。单独的renderModuleFactory和前端代码

1 个答案: