角度4。分离 renderModuleFactory 和前端代码

Question

我们可以将 angular 中的 renderModuleFactory 和前端本身分开吗？我有一个前端项目，我想用 renderModuleFactory/Platform-server（新的 Angular 通用）

的力量来提升它

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

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

向 NodeJS 提供我的模板和 JS 文件

但我很困惑，我们如何配置平台服务器以从外部主机请求文件？

任何guidance/links非常感谢

ps。基于此 post：https://www.softwarearchitekt.at/post/2017/03/07/server-side-rendering-with-angular-4.aspx 在 [function ngExpressEngine] 中，我们可以创建自己的逻辑来连接到另一个服务器 (s3)

有没有更简单或者更成熟的方案？

Answer 1

我找到了解决方案

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

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

在 client.config 中用于 Webpack

更改输出部分

  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 要求）

in common.config for webpack ExtractTextPlugin 应该再次更改并加上 static 前缀，将 css 文件移动到静态文件夹

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

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

提供服务的最小文件

希望它对其他人有帮助

角度4。分离 renderModuleFactory 和前端代码

Angular4. separate renderModuleFactory and front end code

webpack

server-side-rendering

webpack-2

angular